What is Configuration file structure in Tailwind?

Tailwindmarkup~5 mins

Configuration file structure in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

The configuration file helps you customize Tailwind CSS easily. It controls colors, fonts, and other styles in one place.

You want to change the default colors of your website.

You need to add custom fonts for your project.

You want to enable or disable certain Tailwind features.

You want to add new spacing or sizing options.

You want to organize your styles for easier updates.

Syntax

Tailwind

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {
      colors: {
        customColor: '#123456',
      },
    },
  },
  plugins: [],
};

The file is named tailwind.config.js.

Use module.exports to export your settings.

Examples

Basic config with content path and empty theme extension.

Tailwind

module.exports = {
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Adds a custom color named brandBlue for your project.

Tailwind

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brandBlue: '#1DA1F2',
      },
    },
  },
  plugins: [],
};

Customizes the default sans font family with Roboto.

Tailwind

module.exports = {
  content: ['./public/**/*.html'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Sample Program

This HTML uses the custom color customColor and the default sans font from the Tailwind config.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind Config Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-customColor text-white font-sans p-6">
  <h1 class="text-3xl font-bold">Hello Tailwind!</h1>
  <p>This page uses a custom color and font from the config file.</p>
</body>
</html>

OutputSuccess

Important Notes

Always restart your build tool after changing the config file to see updates.

Use the content array to tell Tailwind where your HTML or JS files are.

Keep your config organized by grouping similar settings inside extend.

Summary

The config file controls your Tailwind styles in one place.

You list your files in content so Tailwind knows where to look.

Use theme.extend to add or change colors, fonts, and more.