What are the common configuration options in Tailwind CSS configuration file tailwind.config.js?

Tailwind CSS configuration file (tailwind.config.js) is the core of customizing the design system. Through the configuration file, you can fully control the behavior of the framework.

Configuration file structure:

javascript
module.exports = {
  content: [], // scanned file paths
  theme: {},   // theme configuration
  plugins: [],  // plugin configuration
}

content configuration:

• Specify file paths for Tailwind to scan
• Supports glob pattern matching
• Examples:

  javascript
  content: [
    "./src/**/*.{html,js}",
    "./pages/**/*.vue",
    "./components/**/*.jsx"
  ]

• In JIT mode, only generates classes that are used

theme configuration:

• colors: custom colors

  javascript
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#10b981',
      'custom-blue': {
        light: '#93c5fd',
        DEFAULT: '#3b82f6',
        dark: '#1d4ed8',
      }
    }
  }

• spacing: custom spacing

  javascript
  theme: {
    spacing: {
      '128': '32rem',
      '144': '36rem',
    }
  }

• fontSize: custom font sizes

  javascript
  theme: {
    fontSize: {
      'xxs': '0.75rem',
      'xxl': '2.25rem',
    }
  }

• fontFamily: custom fonts

  javascript
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    }
  }

• extend: extend default theme

  javascript
  theme: {
    extend: {
      colors: {
        brand: '#ff6b6b',
      },
      spacing: {
        '72': '18rem',
      }
    }
  }

plugins configuration:

• Official plugins:
  • @tailwindcss/forms: form styles
  • @tailwindcss/typography: typography styles
  • @tailwindcss/aspect-ratio: aspect ratio
  • @tailwindcss/line-clamp: text truncation
• Install plugin: npm install -D @tailwindcss/forms
• Use plugin:

  javascript
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ]

presets configuration:

• Use preset configuration
• Example:

  javascript
  presets: [
    require('./my-preset'),
  ]

darkMode configuration:

• 'media': use system preference
• 'class': use class name control
• Example:

  javascript
  darkMode: 'class', // or 'media'

corePlugins configuration:

• Disable core plugins
• Example:

  javascript
  corePlugins: {
    preflight: false, // disable base style reset
  }

important configuration:

• Set !important priority
• Example:

  javascript
  important: true, // add !important to all classes
  // or
  important: '#app', // add !important under specific selector

prefix configuration:

• Add prefix to all classes
• Example:

  javascript
  prefix: 'tw-', // all class names become tw-*

separator configuration:

• Customize class name separator
• Example:

  javascript
  separator: '_', // use underscore instead of hyphen

safelist configuration:

• Prevent certain classes from being purged
• Example:

  javascript
  safelist: [
    'bg-red-500',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['hover', 'focus'],
    }
  ]

Best practices:

• Use extend instead of overriding default theme
• Reasonably organize configuration file structure
• Use design tokens to maintain consistency
• Use plugins to extend functionality
• Regularly review and optimize configuration