Skip to main content
Tailwind CSS v4 uses a JavaScript configuration file for advanced customization beyond what’s possible with @theme in CSS. The configuration file allows you to define content sources, plugins, presets, and more.

​
Basic Configuration

Create a tailwind.config.js or tailwind.config.ts file in your project root:
tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
} satisfies Config

​
Configuration Options

​
Content

Define which files Tailwind should scan for class names: 
export default {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
}
​
content
string[] | ContentConfig
Files to scan for utility class usage
​
files
(string | { raw: string, extension?: string })[]
required
Array of file paths or raw content objects
​
relative
boolean
Whether to use relative paths from the config file (default: false)

​
Dark Mode

Configure how dark mode is handled: 
export default {
  // No dark mode support
  darkMode: false,
  
  // Use media query strategy
  darkMode: 'media',
  
  // Use class strategy (requires .dark on html element)
  darkMode: 'class',
  
  // Use class strategy with custom class
  darkMode: ['class', '.dark-mode'],
  
  // Use selector strategy (more predictable with :where())
  darkMode: 'selector',
  
  // Use custom selector
  darkMode: ['selector', '[data-theme="dark"]'],
  
  // Use variant strategy for complete control
  darkMode: ['variant', '&:is(.dark *)'],
}
​
darkMode
DarkModeStrategy
Controls dark mode implementation strategyStrategies:
  • false - No dark mode support
  • 'media' - Use @media (prefers-color-scheme: dark)
  • 'class' - Requires .dark class on html element
  • ['class', string] - Custom class name
  • 'selector' - Like class but uses :where() for specificity control
  • ['selector', string] - Custom selector
  • ['variant', string | string[]] - Complete custom control

​
Prefix

Add a prefix to all utility classes: 
export default {
  prefix: 'tw-',
}
This generates classes like tw-flex, tw-pt-4, etc.
​
prefix
string
Prefix to add to all generated utility classes

​
Important

Make all utilities !important or scope them to a selector: 
export default {
  important: true,
}
​
important
boolean | string
Add !important to all utilities or scope to a selector

​
Blocklist

Prevent specific utilities from being generated: 
export default {
  blocklist: ['container', 'collapse'],
}
​
blocklist
string[]
Array of utility names to exclude from generation

​
Presets

Extend or override configuration from another config: 
import baseConfig from './tailwind.base.config'

export default {
  presets: [baseConfig],
  theme: {
    extend: {
      // Your overrides
    },
  },
}
Presets are processed first, and each subsequent config can override values from previous ones. The preset system allows for shareable configuration packages.

​
TypeScript Support

The config file has full TypeScript support:
tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
    },
  },
}

export default config

​
Complete Example

tailwind.config.ts
import type { Config } from 'tailwindcss'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

export default {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
  plugins: [forms, typography],
} satisfies Config

Build docs developers (and LLMs) love

Get started for freeTalk to us