Part 5: Understanding the Tailwind Engine & JIT Compiler

In early versions of Tailwind, the framework pre-generated thousands of CSS classes ahead of time, resulting in massive 10MB+ development CSS files that slowed down browser DevTools.

In modern Tailwind CSS, the Just-in-Time (JIT) Compiler generates styles on demand as you write markup.

1. How the JIT Compiler Works

[ Your Template Files (HTML, JSX, Vue) ]
                  │
                  ▼
   [ Fast Regex Scanner: Scans class tokens ]
                  │
                  ▼
 [ JIT Compiler generates ONLY the classes found ]
                  │
                  ▼
        [ Tiny Minified CSS Output ]

Key Highlights:

• Instant Compilation: Build times drop from seconds to milliseconds.
• Identical Dev and Prod: No differences in available utilities between development and production.
• Arbitrary Values: Enables dynamic on-the-fly values like top-[117px] or bg-[#1da1f2].
• Infinite Variant Stacking: Allows combining modifiers seamlessly like dark:hover:focus:bg-red-500.

2. How Tailwind Detects Classes

Tailwind uses a regex scanner to look for complete class strings.

⚠️ The Dynamic Class Name Trap:

Tailwind does not execute JavaScript. If you construct class names dynamically with string concatenation, the scanner will not find them:

// ❌ BROKEN: Tailwind cannot see 'bg-blue-500' or 'bg-red-500'
const color = 'blue';
<div className={`bg-${color}-500`}></div>

//  CORRECT: Always write complete class names
const colorClasses = {
  blue: 'bg-blue-500',
  red: 'bg-red-500',
};
<div className={colorClasses[color]}></div>

Key Takeaways

• The JIT compiler generates CSS on-demand, enabling arbitrary values and instant build times.
• Always use full, unbroken class names so the scanner can locate them.

In Part 6, we will configure our Editor, VS Code IntelliSense, and Prettier Class Sorting!