Advanced12 min read

Performance & Optimization

Optimize Tailwind for production — tree shaking unused styles, JIT compilation, bundle size analysis, and caching strategies.

How Tailwind Purges CSS

Tailwind scans your content files for class names and generates only the CSS you use. The content array in config (v3) or automatic detection (v4) determines which files are scanned.

If a class is missing in production, it was not detected during scanning. Dynamic class names like bg-${color}-500 must use a safelist or complete class names visible to the scanner.

Never build class names with string concatenation — scanners cannot detect them
Use complete class names in code: colors[status] not `bg-${status}`
Tailwind v4 uses automatic content detection with no config needed

// Safelist dynamic classes
module.exports = {
  safelist: [
    'bg-red-500', 'bg-green-500', 'bg-blue-500',
    { pattern: /bg-(red|green|blue)-(400|500|600)/ },
  ],
};

JIT Compiler

Just-in-Time compilation generates styles on demand as you write them. Arbitrary values (w-[137px], bg-[#1da1f2]) work without config changes. JIT replaced the old purge-based workflow in Tailwind v3+.

JIT produces smaller CSS because only used utilities are generated. Development builds are fast because unused utilities are never created.

<!-- Arbitrary values — no config needed -->
<div class="w-[calc(100%-2rem)] top-[117px] bg-[#1da1f2]">
  Pixel-perfect positioning
</div>

Bundle Size Analysis

Measure your CSS output size before and after optimization. A well-configured Tailwind project produces 5–15KB gzipped CSS. If yours exceeds 50KB gzipped, investigate safelist bloat, unused plugins, or overly broad content paths.

Use webpack-bundle-analyzer or Vite rollup visualizer to inspect CSS chunk sizes. Compare development vs production builds — dev CSS is intentionally unminified.

# Check production CSS size
npx tailwindcss -i src/input.css -o dist/output.css --minify
ls -la dist/output.css
gzip -c dist/output.css | wc -c

Production Optimization

Enable minification in your build pipeline. Tailwind CLI supports --minify. Bundlers like Vite minify CSS automatically in production mode. cssnano provides additional compression beyond Tailwind minify.

Split CSS by route in SPA applications for code-splitting. Critical CSS inlining improves first contentful paint for above-the-fold content.

// vite.config.ts — production minification is automatic
export default defineConfig({
  build: {
    cssMinify: 'lightningcss', // faster than default
  },
});

Caching Strategies

Tailwind CSS files hash filenames in production builds for long-term caching. Configure your CDN or server with Cache-Control: immutable for hashed assets.

Development HMR updates CSS without full page reload. Ensure your dev server supports CSS hot module replacement for the fastest feedback loop.

Content-hash filenames enable aggressive CDN caching
Avoid @import in CSS — it blocks parallel downloads
Preload critical CSS for faster first paint