JIT Engine

What JIT Actually Means

JIT stands for Just-In-Time. In Tailwind, it means utilities are generated on demand during the build process instead of pre-generating the entire CSS library.

Before JIT

Older versions of Tailwind generated a massive CSS file with every possible utility. Then a purge step removed unused classes.

With JIT

Now Tailwind scans your templates and generates only the classes it detects. No massive base file. No heavy purge step. Only what you use.

Why This Matters

• Extremely small production CSS.
• Faster builds.
• Arbitrary values support (custom spacing, colors, etc.).
• Less configuration complexity.

Example: Arbitrary Values

<div class="w-[37px] bg-[#1da1f2]"></div>

JIT generates these custom utilities on demand.

Important: JIT Is Build-Time, Not Runtime

JIT does not run in the browser. It runs during your build process. If a class is not visible in your scanned files, it will not exist in the final CSS.

Common Production Bug

Dynamic class names created in JavaScript strings will not be detected.

const size = "lg";
const className = "text-" + size;

Tailwind cannot detect this at build time.

Safe Pattern

const sizes = {
  sm: "text-sm",
  lg: "text-lg"
};

All possible classes exist explicitly in the source.

Safelist Option

If dynamic classes are unavoidable, you can safelist them in the config.

module.exports = {
  safelist: ["text-sm", "text-lg"]
}

Production Rule

• Never rely on dynamically concatenated class names.
• Make sure all utilities exist explicitly in scanned files.
• Verify output CSS in production builds.

Modern Reality

JIT is the reason Tailwind scales well in large applications. It keeps CSS predictable, tiny, and aligned with actual usage.