Production Performance & CSS Bundle Optimization

One of Tailwind's greatest achievements is delivering unmatched production performance. By extracting and generating only the classes used in your codebase, production CSS bundles are typically under 10KB to 15KB gzipped, resulting in lightning-fast First Contentful Paint (FCP) and optimal Core Web Vitals.

However, understanding the JIT scanner's regex heuristics is critical to avoid accidental class purging bugs or bloated stylesheets.

┌─────────────────────────────────────────────────────────────┐
│                 How the JIT Scanner Reads Files             │
│                                                             │
│  ❌ BROKEN (Dynamic String Interpolation):                  │
│  const color = 'indigo';                                    │
│  <div class={`bg-${color}-600`} />                          │
│  (Scanner looks for exact static string "bg-indigo-600",    │
│   finds only "bg-${color}-600", and PURGES THE CLASS!)      │
│                                                             │
│  ✅ CORRECT (Complete Static Class Names):                  │
│  const colorMap = { indigo: 'bg-indigo-600', red: 'bg-red-600' };
│  <div class={colorMap[color]} />                            │
│  (Scanner finds the complete string "bg-indigo-600"!)       │
└─────────────────────────────────────────────────────────────┘

1. The Golden Rule of Tailwind Class Generation

!CRITICALThe Golden Rule: Always write complete, unbroken class names in your source code. Never construct class names using string concatenation or template literal interpolation.

2. Safelisting Dynamic Server-Driven Classes

If your database returns dynamic color values or class names that do not appear statically in template files, add them to the safelist in tailwind.config.js:

module.exports = {
  safelist: [
    'bg-emerald-500',
    'bg-amber-500',
    'bg-rose-500',
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    }
  ],
  // ...
}

Summary & Key Takeaways

• JIT compiler scans source files using static regex pattern matching.
• Never concatenate class names dynamically (bg-${color}-500).
• Use safelist for database-driven or CMS-rendered class names.
• Compressed production CSS bundles typically measure under 15KB.

Best Practices & Senior Guidance

1. Audit Production CSS Output: Check .output/public/_nuxt/*.css or dist/assets/*.css during CI builds to verify CSS size remains under 20KB.