Just-In-Time (JIT) Engine

Definition

The compiler engine introduced in Tailwind v3 that generates CSS instantly on-demand as you write it, rather than generating all 15MB of CSS upfront and purging it later.

Explain Like I'm New

Before JIT, Tailwind pre-built thousands of classes when you started your server, which took 5-10 seconds. With JIT, Tailwind builds absolutely nothing. When you type `bg-red-500` and hit save, the JIT engine detects it and compiles that ONE single CSS class in 3 milliseconds.

Real World Example

JIT makes 'Arbitrary Values' possible. You can type `w-[314px]`. The JIT engine instantly reads it and compiles a custom CSS rule for 314 pixels on the fly.

Common Use Cases

•Developer experience
•Arbitrary values
•Rapid compilation

Interactive Example

Interview Questions

basic

Do you need to manually enable the JIT engine in Tailwind v3+?

intermediate

How does the JIT engine change the way Tailwind handles variants like `focus:hover:md:text-red-500`?

Flash Cards

Question

Manually enable?

Click to reveal answer

Answer

No. JIT is the default and only engine in Tailwind v3 and above.

Question

Stacked variants?

Click to reveal answer

Answer

Before JIT, generating every possible combination of variants would create gigabytes of CSS, so it was restricted. JIT generates them on-demand, meaning you can stack infinite variants (`md:focus-visible:hover:bg-red-500`) with zero file size penalty.