How the JIT Engine Works
Understand how Tailwind v3's default JIT mode scans your files on demand and generates only the utility classes actually used in your markup.
What Is the JIT Engine
Tailwind's Just-In-Time (JIT) engine, introduced in Tailwind v2.1 and made the default in v3, fundamentally changed how Tailwind generates CSS. Instead of pre-generating every possible utility class combination at build time (resulting in megabytes of CSS), JIT scans your project files and generates only the classes you actually use.
The result is a CSS file that is typically just a few kilobytes in development and even smaller in production, with zero wasted code.
Pre-JIT vs JIT Approach
Before JIT, Tailwind used a purge step at the end of build: it generated all possible CSS (~10MB), then stripped any class not found in your templates. This was slow, required careful purge configuration, and broke when class names were dynamically constructed.
JIT inverts this: it scans files first and only generates CSS for classes it finds. The output is immediately small in every environment — development, staging, and production — and the build is significantly faster.
// Old approach: generate ALL classes, then purge
// - ~10MB initial CSS
// - Slow build
// - Purge config errors silently broke production
// JIT approach: scan first, generate only used classes
// - ~3-5KB CSS in development
// - Sub-second builds
// - No separate purge step neededAll lessons in this course
- How the JIT Engine Works
- Safe-Listing Dynamic Classes
- Analyzing and Reducing Bundle Size
- Arbitrary Values and Their Cost