optimize-config

Optimize TailwindCSS Configuration

This command analyzes and optimizes your TailwindCSS setup for maximum performance and minimal bundle size.

What This Command Does

1. Content Path Optimization

   • Analyzes project structure to optimize content scanning
   • Configures precise file patterns for better purging
   • Excludes unnecessary directories and files

2. Bundle Size Analysis

   • Identifies unused utilities in your CSS bundle
   • Optimizes safelist configuration
   • Configures effective CSS purging strategies

3. Build Performance

   • Optimizes PostCSS pipeline configuration
   • Configures caching strategies
   • Sets up development vs production optimizations

4. Plugin and Theme Cleanup

   • Removes unused plugins and theme extensions
   • Optimizes custom utility configurations
   • Cleans up redundant theme settings

Usage Examples

Analyze Current Bundle Size

# Build CSS and analyze size
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
wc -c ./dist/output.css

# With minification
npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify
wc -c ./dist/output.css

# Compress with Brotli
brotli -q 11 ./dist/output.css
ls -lh ./dist/output.css.br

Content Path Optimization

// Before: Generic paths
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
}

// After: Specific optimized paths
module.exports = {
  content: [
    // Be specific about directories
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts}',
    
    // Include component libraries if used
    './node_modules/@your-ui-lib/**/*.{js,ts,jsx,tsx}',
    
    // Exclude unnecessary files
    '!./node_modules',
    '!./.git',
    '!./.next',
    '!./dist',
    '!./coverage',
  ],
}

Advanced Content Configuration

module.exports = {
  content: [
    {
      files: ['./src/**/*.{js,ts,jsx,tsx}'],
      // Custom extraction for complex patterns
      transform: {
        js: (content) => {
          // Extract classes from template literals
          return content.match(/(?:class|className)(?:Name)?[`:=]\s*[`"']([^`"']*)[`"']/g) || []
        }
      }
    },
    {
      files: ['./components/**/*.{js,ts,jsx,tsx}'],
      // Extract dynamic class compositions
      transform: {
        jsx: (content) => {
          const matches = content.match(/(?:clsx|cn|twMerge)\([^)]*\)/g) || []
          return matches.join(' ')
        }
      }
    }
  ]
}