What is the JIT compiler in TailwindCSS and what are its advantages?

TailwindCSS v3.0 introduced the JIT (Just-In-Time) compiler, which is a significant performance improvement with notable advantages over traditional AOT (Ahead-Of-Time) compilation.

How JIT Compiler Works

The JIT compiler generates CSS on-demand during development, rather than pre-generating all possible style combinations.

Core Mechanism

1. Scan Files: JIT compiler scans all template files in the project (HTML, JS, Vue, React, etc.)
2. Extract Class Names: Extracts actually used TailwindCSS class names
3. Dynamic Generation: Only generates CSS rules that are used
4. Real-time Updates: Automatically updates generated CSS when class names change

JIT vs AOT Comparison

AOT (Old Version)

• Pre-generates all possible style combinations
• Large file size (usually 3MB+)
• Long build time
• Needs PurgeCSS configuration to remove unused styles

JIT (v3.0+)

• Generates styles on-demand
• Small file size (usually only tens of KB)
• Fast build speed
• No need for additional PurgeCSS configuration
• Supports arbitrary value syntax

Main Advantages of JIT

1. Arbitrary Value Syntax

html
<!-- Can use arbitrary values directly -->
<div class="w-[137px] bg-[#1da1f2]">
  Custom styles
</div>

2. Variant Stacking

html
<!-- Can stack multiple variants -->
<button class="hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50">
  Button
</button>

3. Faster Build Speed

• Only processes actually used class names
• Reduces unnecessary CSS generation
• Development server starts faster

4. Smaller Final Files

• Only contains used styles
• Automatically optimizes CSS output
• No need for additional cleanup steps

Configuring JIT Compiler

Enable JIT in tailwind.config.js:

javascript
module.exports = {
  mode: 'jit',
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Advanced JIT Features

1. Dynamic Class Name Support

javascript
// Can use template strings
const size = 'large';
<div class={`text-${size}`}>
  Dynamic size
</div>

2. Safelist

javascript
module.exports = {
  safelist: [
    'bg-red-500',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-500/,
      variants: ['hover', 'focus'],
    },
  ],
}

3. Custom Variants

javascript
module.exports = {
  theme: {
    extend: {
      variants: {
        display: ['group-hover'],
      },
    },
  },
}

Best Practices

1. Use content Configuration: Clearly specify file paths to scan
2. Avoid Dynamic Class Names: Try to use complete class names instead of dynamic concatenation
3. Leverage Arbitrary Value Syntax: Use arbitrary value syntax for one-time styles
4. Monitor File Size: Regularly check the generated CSS file size

Considerations

• JIT compiler requires Node.js 12.13.0 or higher
• Some older browsers may need additional polyfills
• Ensure content option is correctly configured in production environment