Tailwind CSS Performance Optimization

The key to Tailwind performance is removing unused CSS through a process called purging, which is now integrated directly into Tailwind's build process.

Basic Content Configuration

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/index.html',
  ],
  theme: {
    // ...
  },
  plugins: [],
}

Advanced Content Configuration

 {
        return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
      }
    }
  ],
  theme: {
    // ...
  },
  plugins: [],
}]]>

Benefits of JIT Mode

• Faster build times: Only generates the CSS you actually use
• Smaller development builds: No need to generate the entire Tailwind CSS framework
• No purging required: CSS is generated on-demand based on the classes used in your templates
• Arbitrary value support: Use any value with square bracket notation, e.g., top-[117px]

JIT Mode Example

<!-- Using arbitrary values with JIT mode -->
<div class="top-[117px] lg:top-[344px] bg-[#bada55] text-[22px]">
  This uses arbitrary values that would not be included in a standard Tailwind build
</div>

CSS Minification

Use a CSS minifier like cssnano (included with PostCSS) to remove whitespace, comments, and optimize CSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

Gzip/Brotli Compression

Configure your server to use Gzip or Brotli compression for CSS files:

// Example Nginx configuration
server {
  # ...
  gzip on;
  gzip_types text/css application/javascript;
  # ...
}

Disabling Unused Core Plugins

// tailwind.config.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
    // Disable any plugins you don't use
  },
}

Limiting Variants

In Tailwind v2 and earlier, you needed to manually specify which variants to generate. In v3 with JIT mode, variants have minimal impact on file size, so this is less necessary.

// tailwind.config.js (for Tailwind v2.x)
module.exports = {
  // ...
  variants: {
    extend: {
      // Only enable variants you actually use
      backgroundColor: ['hover', 'focus', 'active'],
      borderColor: ['hover', 'focus'],
      // Other properties...
    },
  },
}

Reducing Theme Options

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // Replace the default color palette with a smaller one
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
      // Only include colors you actually use
    },
    // Reduce spacing scale
    spacing: {
      0: '0',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      8: '2rem',
      10: '2.5rem',
      12: '3rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      32: '8rem',
      40: '10rem',
      48: '12rem',
      56: '14rem',
      64: '16rem',
    },
    // Only include font sizes you use
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
    },
  },
}

Using Environment Variables

// tailwind.config.js
module.exports = {
  // ...
  // In older versions of Tailwind, you'd use purge instead of content
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.{html,js,jsx,ts,tsx}',
    ],
  },
}

Separating Development and Production Configs

// tailwind.config.js
const colors = require('tailwindcss/colors')

const development = {
  theme: {
    extend: {
      colors: {
        // Full color palette for development
        ...colors,
      },
    },
  },
}

const production = {
  theme: {
    extend: {
      colors: {
        // Limited color palette for production
        gray: colors.gray,
        blue: colors.blue,
        red: colors.red,
        green: colors.green,
      },
    },
  },
}

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  ...(process.env.NODE_ENV === 'production' ? production : development),
}

Using Bundlesize

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/css/main.css",
      "maxSize": "10 kB"
    }
  ]
}

Webpack Bundle Analyzer

For projects using webpack, you can visualize your CSS bundle size:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Manual Inspection

// Check file size
$ ls -lh dist/css/main.css

// Check gzipped size
$ gzip -c dist/css/main.css | wc -c

• Use consistent class naming: Stick to Tailwind's utility classes rather than creating custom utilities that duplicate functionality
• Extract components for repeated patterns: Use component extraction or @apply for frequently used combinations
• Be specific with content paths: Only include files that actually contain Tailwind classes
• Use layers for custom utilities: Add custom utilities to the appropriate layer to ensure proper purging
• Avoid dynamic class generation: Dynamically concatenated class strings can prevent proper purging
• Consider code splitting: For large applications, split CSS by route or component

Example of Proper Custom Utility Definition

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .custom-utility {
    /* Your styles here */
  }
}

Safe Dynamic Classes

// Bad - may not be properly purged
const dynamicClasses = `text-${size}-${color}`;

// Good - explicit classes that can be properly purged
const sizeClasses = {
  sm: 'text-sm',
  md: 'text-md',
  lg: 'text-lg',
};

const colorClasses = {
  red: 'text-red-500',
  blue: 'text-blue-500',
  green: 'text-green-500',
};

const dynamicClasses = `${sizeClasses[size]} ${colorClasses[color]}`;