Advanced Configuration

Complete Configuration File

// tailwind.config.js - Complete configuration
export default {
  // Content scanning for template files
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
  ],
  
  // Enable/disable dark mode
  darkMode: 'class', // or 'media'
  
  // Theme customization
  theme: {
    extend: {
      colors: {},
      spacing: {},
      fontFamily: {},
    },
  },
  
  // Plugins
  plugins: [],
  
  // JIT mode
  corePlugins: {},
  
  // Separator customization
  separator: ':',
  
  // Important modifier
  important: false,
  
  // Prefix for all utilities
  prefix: 'bismillah-',
  
  // Extend/override corePlugins
  corePlugins: {
    preflight: true,
  },
}

Content Configuration

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

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Include safelist for dynamically generated classes
    { raw: 'w-1/2 h-full', extension: 'html' },
  ],
  safelist: [
    'bg-red-500',
    'bg-blue-500',
    'bg-green-500',
  ],
}

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    {
      raw: '<button class="bg-red-500">Click me</button>',
      extension: 'html',
    },
  ],
  // Exclude patterns
  corePlugins: {
    preflight: false, // disable base styles
  },
}

Dark Mode Configuration

export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        bg: {
          light: '#ffffff',
          dark: '#1f2937',
        },
      },
    },
  },
}

export default {
  darkMode: 'media', // Uses prefers-color-scheme
}

export default {
  darkMode: ['class', '[data-theme="dark"]'],
}

Build Optimization

// postcss.config.js
export default {
  plugins: [
    {
      'postcss-import': {},
      'tailwindcss': {
        content: [
          './app/**/*.{js,ts,jsx,tsx}',
          './components/**/*.{js,ts,jsx,tsx}',
        ],
        safelist: [
          // Classes to always include in production
          'dark',
          'active',
          'disabled',
        ],
      },
      'autoprefixer': {},
    },
  ],
}

# Build CSS for production
NODE_ENV=production npm run build

# The CSS will be minified and unused styles removed

# Watch for changes during development
npm run dev

# Faster build times, not optimized

Prefix Configuration

export default {
  // Add prefix to all utilities
  prefix: 'bismillah-',
  
  // Usage
  // bismillah-flex, bismillah-grid, bismillah-hidden, etc.
  
  // Or customize prefix
  prefix: 'tw-',    // Results in tw-flex, tw-grid
  prefix: '.my-',   // Results in .my-flex, .my-grid
}

Important Modifier

export default {
  // Enable !important on all utilities
  important: true,
  // Results in: .bg-red-500 { background-color: red !important; }
  
  // Or use selector
  important: '#app',
  // Only applies to #app scope
}

Separator Configuration

export default {
  // Customize the separator (default: ':')
  separator: '_',
  
  // Usage: md_flex, dark_bg-red-500
  // Instead of: md:flex, dark:bg-red-500
  
  // Other options
  separator: '__',   // md__flex
  separator: '-',    // md-flex
}

Core Plugins Configuration

export default {
  // Disable specific core plugins
  corePlugins: {
    preflight: false,      // Don't reset base styles
    container: false,      // Don't include container
    space: false,          // Don't include spacing
    padding: false,        // Don't include padding
    margin: false,         // Don't include margins
    backgroundColor: true, // Keep background color
  },
}

Performance Optimization

export default {
  theme: {
    extend: {
      // Only include specific colors instead of full palette
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        success: '#10b981',
      },
      // Limit spacing scale
      spacing: {
        1: '0.25rem',
        2: '0.5rem',
        4: '1rem',
      },
    },
  },
}

export default {
  // Modern Tailwind comes with JIT enabled by default
  // This allows arbitrary values
  // Example: w-[35rem], bg-[rgb(217,119,6)]
}

/* Base level - only what you need */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Remove preflight for smaller bundle */
/* @layer base { /* custom base styles */ }

Environment-Specific Configuration

// tailwind.config.js
const isProduction = process.env.NODE_ENV === 'production';

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  
  theme: {
    extend: {
      colors: isProduction ? {
        // Limit colors in production
        primary: '#3b82f6',
      } : {
        // Full palette in development
        alias: '#any-color',
      },
    },
  },
  
  // Disable warnings in production
  plugins: isProduction ? [] : [],
}

Extending Configuration

export default {
  // Override vs Extend
  
  // OVERRIDE - Replace entire theme
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
    },
  },
  
  // EXTEND - Add to existing theme
  theme: {
    extend: {
      colors: {
        custom: '#xyz',
      },
    },
  },
}

Variants Configuration

export default {
  variants: {
    extend: {
      // Add custom variants
      backgroundColor: ['group-hover', 'focus-within'],
      textColor: ['group-focus'],
      opacity: ['disabled'],
    },
  },
}

Configuration Best Practices

• Keep content paths specific for faster builds
• Use safelist for dynamically generated classes
• Disable unused core plugins to reduce CSS size
• Use environment variables for different configs
• Set appropriate dark mode strategy
• Document custom configuration choices
• Test production builds before deployment
• Monitor CSS file size in production