Bird
Raised Fist0
Tailwindmarkup~5 mins

Configuration file structure in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What is the main purpose of the content array in the Tailwind configuration file?
easy
A. To tell Tailwind which files to scan for class names
B. To define custom colors and fonts
C. To set the default font size for the project
D. To list plugins used by Tailwind

Solution

  1. Step 1: Understand the role of content

    The content array lists files where Tailwind looks for class names to generate styles.

  2. Step 2: Differentiate from other config parts

    Colors and fonts are set under theme.extend, not content.

  3. Final Answer:

    To tell Tailwind which files to scan for class names -> Option A

  4. Quick Check:

    content = files to scan [OK]
Hint: Remember: content = files Tailwind scans for classes [OK]
Common Mistakes:
  • Confusing content with theme.extend
  • Thinking content sets colors or fonts
  • Assuming content lists plugins
2. Which of the following is the correct way to extend the color palette in tailwind.config.js?
easy
A. "colors: { extend: { primary: '#123456' } }"
B. "theme: { colors: { primary: '#123456' } }"
C. "extend: { theme: { colors: { primary: '#123456' } } }"
D. "theme: { extend: { colors: { primary: '#123456' } } }"

Solution

  1. Step 1: Identify correct nesting for extending theme

    To add or change colors without overwriting defaults, use theme.extend.colors.

  2. Step 2: Check each option's structure

    "theme: { extend: { colors: { primary: '#123456' } } }" correctly nests colors inside extend inside theme.

  3. Final Answer:

    "theme: { extend: { colors: { primary: '#123456' } } }" -> Option D

  4. Quick Check:

    Extend colors inside theme.extend [OK]
Hint: Use theme.extend to add colors, not theme alone [OK]
Common Mistakes:
  • Putting colors directly under theme (overwrites defaults)
  • Misplacing extend outside theme
  • Wrong nesting order
3. Given this tailwind.config.js snippet, what will be the background color class for the custom color?
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a202c'
      }
    }
  }
}
medium
A. bg-custom-brand
B. background-brand
C. bg-brand
D. brand-bg

Solution

  1. Step 1: Understand Tailwind color class naming

    Custom colors added under colors get classes like bg-[colorName] for backgrounds.

  2. Step 2: Match color name to class

    The color name is brand, so background class is bg-brand.

  3. Final Answer:

    bg-brand -> Option C

  4. Quick Check:

    Custom color 'brand' -> class 'bg-brand' [OK]
Hint: Custom colors use bg-[name] for backgrounds [OK]
Common Mistakes:
  • Using wrong prefix like background- or brand-bg
  • Adding extra words like custom
  • Confusing text color with background color classes
4. Identify the error in this Tailwind config snippet:
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      primary: '#ff0000'
    },
    extend: {
      fontFamily: {
        sans: ['Arial', 'sans-serif']
      }
    }
  }
}
medium
A. content array syntax is incorrect
B. Colors should be inside extend, not directly under theme
C. fontFamily should not be inside extend
D. Missing comma after colors object

Solution

  1. Step 1: Check placement of colors in config

    Directly placing colors under theme overwrites default colors, usually we extend them inside theme.extend.

  2. Step 2: Verify other parts

    Content array syntax is correct, fontFamily can be extended inside extend, commas are properly placed.

  3. Final Answer:

    Colors should be inside extend, not directly under theme -> Option B

  4. Quick Check:

    Extend colors to avoid overwriting defaults [OK]
Hint: Put colors inside theme.extend to keep defaults [OK]
Common Mistakes:
  • Placing colors directly under theme overwrites defaults
  • Thinking content syntax is wrong
  • Misplacing fontFamily outside extend
5. You want to add a new font family called heading and a custom color accent without removing Tailwind's defaults. Which config structure correctly achieves this?
hard
A. 
module.exports = {
  theme: {
    extend: {
      fontFamily: { heading: ['Georgia', 'serif'] },
      colors: { accent: '#ff6600' }
    }
  }
}
B. 
module.exports = {
  extend: {
    theme: {
      fontFamily: { heading: ['Georgia', 'serif'] },
      colors: { accent: '#ff6600' }
    }
  }
}
C. 
module.exports = {
  theme: {
    fontFamily: { heading: ['Georgia', 'serif'] },
    colors: { accent: '#ff6600' }
  }
}
D. 
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    fontFamily: { heading: ['Georgia', 'serif'] },
    extend: { colors: { accent: '#ff6600' } }
  }
}

Solution

  1. Step 1: Understand how to add without removing defaults

    To add fonts and colors without removing defaults, place them inside theme.extend.

  2. Step 2: Check each option's structure

    module.exports = {
  theme: {
    extend: {
      fontFamily: { heading: ['Georgia', 'serif'] },
      colors: { accent: '#ff6600' }
    }
  }
}
    correctly puts both fontFamily and colors inside extend under theme.

  3. Final Answer:

    module.exports = { theme: { extend: { fontFamily: { heading: ['Georgia', 'serif'] }, colors: { accent: '#ff6600' } } } } -> Option A

  4. Quick Check:

    Use theme.extend for adding fonts and colors [OK]
Hint: Always add new styles inside theme.extend to keep defaults [OK]
Common Mistakes:
  • Adding new styles directly under theme (overwrites defaults)
  • Misplacing extend outside theme
  • Splitting fontFamily and colors incorrectly