How Tailwind Applies Styles (JIT & PurgeCSS)
Tailwind CSS uses a Just-In-Time (JIT) compiler to generate only the utility classes your project needs. This results in smaller, faster stylesheets and better performance in development and production.
1. Just-In-Time (JIT) Mode
JIT mode compiles your CSS on-demand, as you use classes in your HTML. It's fast, supports arbitrary values, and eliminates the need for manual purging.
// tailwind.config.js
module.exports = {
content: ['./*.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
As soon as a class appears in your content, JIT adds it to the output.
2. Arbitrary Value Support
With JIT, you can use arbitrary values without predefining them:
<div class="w-[475px] bg-[#123456] text-[22px]">Custom Width, Color, and Font Size</div>
3. PurgeCSS (Content Scanning)
Tailwind used to rely on PurgeCSS to remove unused classes. In JIT mode, this is replaced with intelligent content scanning based on your config paths.
- Scans your HTML, JS, PHP, etc. for used classes
- Only includes those classes in the final CSS
- Significantly reduces bundle size
4. Performance and Build Size
JIT improves both dev experience and final output:
- Faster build and rebuild times
- Smaller CSS files by default
- Instant support for new or custom values
Conclusion
Tailwind’s JIT engine and content scanning make it incredibly efficient and scalable. You write utility classes, and Tailwind handles the rest — building only what's needed in your production CSS.