Jit Mode Just In Time Compiler in TailwindCSS
JIT Mode (Just-in-Time Compiler) in Tailwind CSS
What is JIT Mode?
JIT Mode is a Just-in-Time compiler introduced in Tailwind CSS (starting officially from v2.1 and enabled by default in v3+). Instead of generating all possible CSS classes upfront, it generates styles on-demand as you use them in your HTML, JavaScript, or template files.
How JIT Works
As you write HTML/classes, the compiler scans your source files in real-time.
It compiles only the CSS classes you actually use and injects them immediately.
This leads to faster build times and much smaller CSS output.
Benefits of JIT Mode
| Benefit | Description |
|---|---|
| Instant builds | Near-instantaneous compilation while developing, no waiting for large CSS files to generate. |
| Smaller CSS size | Only the styles you actually use are included, reducing file size drastically. |
| Unlimited variants | Supports arbitrary values (e.g., bg-[#123456], text-[25px]) and dynamic variants. |
| More utilities | Allows generating utilities on the fly without adding them manually in the config. |
| Improved developer experience | Better feedback and no need to restart the build when adding new classes. |
How to Enable JIT
Tailwind v3 and above: JIT is enabled by default. No config needed.
Tailwind v2.1+ (older versions): Add in
tailwind.config.js:
module.exports = { mode: 'jit', // other config...}Example of Arbitrary Values with JIT
You can write classes that were impossible before, like:
<div class="bg-[#1c92d2] p-[23px] text-[17px]"> Custom colored box with specific padding and text size</div>Tailwind JIT will generate these styles dynamically.
Configuring JIT Content Paths
Make sure your tailwind.config.js includes all files where you use Tailwind classes:
module.exports = { content: ['./src/**/*.{html,js,jsx,ts,tsx}'],}This ensures JIT scans all relevant files to generate CSS.
Summary
| Aspect | Description |
|---|---|
| What is it? | A compiler that generates Tailwind CSS classes on-demand |
| Benefits | Faster builds, smaller CSS, arbitrary values support |
| Setup | Default in Tailwind v3+, otherwise mode: 'jit' |
| Use case | All projects, especially those with dynamic or large sets of classes |
If you'd like, I can help you set up JIT with your project or show examples of using arbitrary values!
