Tailwind Config

The Configuration File

When you run npx tailwindcss init, Tailwind creates a tailwind.config.js file. This file is the control center for your entire Tailwind setup — it defines which files to scan, how to extend the default theme, and which plugins to load.

Default Config Structure

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

The content Property

The content array tells Tailwind which files to scan for class names. Only the classes found in these files will be included in the final CSS. This is how Tailwind keeps builds tiny.

module.exports = {
  content: [
    "./*.html",
    "./src/**/*.{html,js,jsx,ts,tsx}",
    "./components/**/*.vue",
  ],
  // ...
};

Use glob patterns to match all relevant template files. If a class is not found in any matched file, it will be excluded from the output CSS.

Customizing the Theme

Extending vs Overriding

There are two ways to modify the theme:

Extend — Adds new values while keeping all defaults. Use theme.extend.
Override — Replaces the defaults entirely. Use theme directly.

module.exports = {
  content: ["./*.html"],
  theme: {
    // OVERRIDE: only these colors will be available
    colors: {
      primary: "#1e40af",
      secondary: "#9333ea",
      white: "#ffffff",
      black: "#000000",
    },

    extend: {
      // EXTEND: adds these on top of all existing values
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
};

Tip: Almost always use extend unless you intentionally want to remove all defaults for a property.

Adding Custom Colors

module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },
      },
    },
  },
};

Now you can use bg-brand-500, text-brand-700, etc. throughout your HTML.

Custom Breakpoints

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Custom ultra-wide breakpoint
    },
  },
};

Custom Font Families

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Poppins', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
        code: ['Fira Code', 'monospace'],
      },
    },
  },
};

Usage: font-heading, font-body, font-code.

Full vs Minimal Config

You can generate a config with all default values exposed for reference:

npx tailwindcss init --full

This creates a large config file showing every default value. It is useful for reference but should not be used in production — stick with the minimal config and use extend.

Plugins

Tailwind supports official and community plugins:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

@tailwindcss/forms — Better default styling for form elements.
@tailwindcss/typography — Beautiful prose styling with the prose class.
@tailwindcss/aspect-ratio — Utilities for fixed aspect ratios.

Dark Mode

Tailwind supports dark mode out of the box. Enable it in config:

module.exports = {
  darkMode: 'class', // or 'media' for OS preference
  // ...
};

With 'class' mode, you toggle dark mode by adding a dark class to the <html> element. Then use the dark: prefix in your HTML:

<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  This switches between light and dark mode.
</div>

Production Optimization

As long as your content paths are correct, Tailwind automatically removes all unused CSS in production builds. No extra configuration needed. A typical production CSS file is under 10KB gzipped.

Recap

tailwind.config.js controls content scanning, theme customization, and plugins.
Use theme.extend to add values without losing defaults.
Custom colors, fonts, spacing, and breakpoints are defined in the config.
Dark mode is built in and configured via the config file.
Keep content paths accurate for optimal production builds.

Next, we will learn how to add custom fonts from Google Fonts to your Tailwind project.