กลไก JIT ทำงานอย่างไร

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.

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.

JIT reads the content array in tailwind.config.js to know which files to scan. It uses a fast regex-based scan (not a full HTML/JS parser) to find class-like strings. Any string that matches a known Tailwind class pattern gets its CSS generated.

This is why correctly configuring the content array is critical — if JIT cannot find a file, classes used in it will not be generated.

When JIT detects a class in your markup, it generates the exact CSS rule for it immediately. If you use bg-blue-500, only that one color rule is generated — not the entire blue color scale. If you later add bg-blue-700, JIT generates that new rule on the next rebuild.

In development, this happens in milliseconds thanks to the file watcher. JIT's approach means you get zero-overhead CSS — every byte in your stylesheet is actively used.

JIT unlocks arbitrary value syntax — the ability to use any CSS value directly in a class name using square bracket notation. Before JIT, arbitrary values were impossible without custom configuration. JIT generates the rule on demand when it detects the bracket syntax.

For example, w-[347px], text-[#1a2b3c], or top-[calc(100vh-64px)] all work out of the box. JIT detects the brackets, parses the value, and generates exactly the CSS needed.

A critical limitation of JIT's scan-based approach is that it cannot detect dynamically constructed class names. If you build a class name by string concatenation in JavaScript, JIT will not see the result at scan time.

The solution is to avoid partial class construction. Always use complete class strings, or use a safelist in the config for dynamically determined classes.

Running npx tailwindcss -i input.css -o output.css --watch starts JIT in watch mode. It monitors all files matching the content globs and rebuilds the CSS file within milliseconds whenever a file changes.

In a Vite or Next.js project, Tailwind's JIT is integrated into the build tool's HMR (Hot Module Replacement) pipeline, so CSS updates appear in the browser instantly without a full page reload.

Before JIT, you had to explicitly enable variants in the config file (like hover, focus, dark) for each utility group. Enabling every variant for every utility pre-generated an enormous CSS file.

JIT solves this completely — every variant works on every utility without configuration. hover:bg-blue-500, dark:text-white, lg:hover:bg-blue-700 — all generated on demand with zero config.

The content array uses glob patterns to specify which files JIT should scan. A glob like './src/**/*.{html,js}' matches all HTML and JS files anywhere inside the src directory tree.

Common mistakes include forgetting file extensions, using incorrect base paths, or not including node_modules packages that contain Tailwind classes (like UI component libraries). You can also pass string arrays instead of globs for specific files.

JIT generates the same set of CSS in both development and production — only the classes found in your content files. The difference in production is that Tailwind also applies minification (via the CSS minifier in your build tool) and potentially PostCSS autoprefixer for older browser support.

There is no separate purge step in Tailwind v3. Setting NODE_ENV=production in your build command enables minification but does not change which classes are generated — they were already minimal in development thanks to JIT.

JIT respects Tailwind's CSS layer order: base styles come first, then component styles, then utility styles. This ordering is important because utilities have the highest specificity by convention — they should always win when conflicting with component styles.

Custom CSS written with @layer utilities is also generated by JIT alongside the built-in utilities. Custom CSS written outside any @layer falls between base and components in specificity, which can cause unexpected overriding behavior.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: JIT scans your content files as text to find class strings and generates CSS only for those classes, eliminating unused styles from day one; arbitrary values like w-[347px] are enabled by JIT's on-demand generation; and dynamic class construction breaks JIT detection because it cannot execute JavaScript — always use complete class strings in safelisted objects. Next up we learn about safe-listing dynamic classes.