Configuration

The tailwind.config.js file is where you customize Tailwind to match your project's design system. This is the single source of truth for your colors, fonts, spacing, breakpoints, and more.

Basic structure

A Tailwind config file exports an object with a few key sections.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
    

The content array tells Tailwind which files to scan for classes. The theme section is where you define your design tokens. The plugins array lets you add third-party or custom plugins.

The content key

This is critical. Tailwind generates CSS by scanning your files for class names. If you add a class but don't include the file in your content array, Tailwind won't generate that class. Use glob patterns to include all your template files.

content: [
  "./src/**/*.html",
  "./src/**/*.js",
  "./src/**/*.jsx",
  "./src/**/*.tsx",
],
    

Extending the theme

The extend key lets you add new values without overriding Tailwind's defaults. If you want to add a brand color, you'd do it here.

theme: {
  extend: {
    colors: {
      brand: "#3490dc",
    },
  },
},
    

This gives you access to bg-brand, text-brand, border-brand, and all the shade variants like bg-brand-50 through bg-brand-900.

The screens key

You can customize or add responsive breakpoints in the screens section.

screens: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
  '3xl': '1800px',
},
    

Adding a custom breakpoint like 3xl means you can use 3xl:flex to apply flexbox at that screen size.