What is JIT Mode in Tailwind CSS?

What You'll Learn

• What JIT mode is
• Benefits
• How it works

What is JIT?

JIT (Just-In-Time) mode generates styles on-demand as you author templates, rather than generating everything upfront.

Since Tailwind v3, JIT is the default and only mode.

Benefits

1. Lightning fast builds - Only generates used styles
2. All variants enabled - No configuration needed
3. Arbitrary values - Use any value w-[137px]
4. No dev/prod differences - Same CSS in both

How It Works

<!-- Your code -->
<div class="mt-5 bg-blue-500">

<!-- Tailwind only generates -->
.mt-5 { margin-top: 1.25rem; }
.bg-blue-500 { background-color: #3b82f6; }

All Variants Available

<!-- These just work without config -->
<div class="sm:hover:active:disabled:bg-blue-500">
<div class="[&>*]:p-4">  <!-- Arbitrary selector -->

Watch Mode

npx tailwindcss -i input.css -o output.css --watch