Configuration File

Set up and configure your Tailwind CSS project with JavaScript configuration files

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:

Array Format

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

content · string[] | ContentConfig

Files to scan for utility class usage

ContentConfig Properties

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 strategy

Strategies:

• 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:

Boolean

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