Tailwind CSS JIT: Transforming Build Times and Workflow

In 2020, if you are using Tailwind CSS, you know the pain: the development build is massive. Because Tailwind generates every possible utility class upfront, your browser's dev tools often choke on a multi-megabyte CSS file. We've been using PurgeCSS to clean it up for production, but the dev experience is still lagging.

Enter the Just-In-Time (JIT) engine. Instead of generating everything, it scans your HTML/JS files and generates only what you use, as you use it.

The Problem: Pre-generated Bloat

Previously, tailwind.config.js would look something like this:

module.exports = {
  purge: ['./src/**/*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['active', 'group-hover'],
    },
  },
}

Every variant you added multiplied the CSS size exponentially.

The Solution: JIT Mode

With the new JIT engine (available as a preview in late 2020), you just flip a switch:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  // ...
}

Dynamic Values

The coolest part of JIT is "Arbitrary Value Support." You are no longer limited to your theme's spacing or color scale. Need a very specific top offset?

<div class="top-[117px] bg-[#bada55] text-[22px]">
  Look Ma, no config!
</div>

Tailwind sees top-[117px] and instantly generates:

.top-\[117px\] {
  top: 117px;
}

Performance Metrics

In a typical large project:

• Dev Build Size: From 8MB -> 10KB.
• Build Speed: From 3-5 seconds -> 80ms.
• Browser Performance: Inspector no longer hangs when toggling styles.

This is a game changer for 2021 and beyond. The constraint of "pre-defined scales" is effectively gone while maintaining the benefits of a utility-first framework.