JIT mode and on-demand generation in Tailwind - Performance & Optimization

Performance: JIT mode and on-demand generation

HIGH IMPACT

This affects the CSS bundle size and page load speed by generating only the styles actually used in the HTML at build or runtime.

Generating CSS styles for a website

Tailwind

/* Tailwind JIT mode enabled in config */
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js}'],
  // other config
};

Generates only the CSS classes actually used in your HTML and JS files, drastically reducing CSS size.

📈 Performance GainReduces CSS bundle size by 70-90%, speeds up LCP by loading less CSS.

Generating CSS styles for a website

Tailwind

/* Tailwind classic mode: all styles generated upfront */
@tailwind base;
@tailwind components;
@tailwind utilities;

Generates the entire Tailwind CSS library, resulting in a large CSS file with many unused styles.

📉 Performance CostAdds 300-500kb to CSS bundle, blocking rendering longer and increasing LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Classic Tailwind (all styles)	Low (CSS only)	1 (initial load)	High (large CSS paint)	[X] Bad
Tailwind JIT mode	Low (CSS only)	1 (initial load)	Low (small CSS paint)	[OK] Good

Rendering Pipeline

JIT mode reduces the CSS size that the browser must download and parse, speeding up style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS files

Core Web Vital Affected

LCP

This affects the CSS bundle size and page load speed by generating only the styles actually used in the HTML at build or runtime.

Optimization Tips

1Use Tailwind JIT mode to generate only the CSS you use.

2Smaller CSS bundles improve page load speed and LCP.

3Avoid generating the full Tailwind CSS library if not needed.

Performance Quiz - 3 Questions

What is the main performance benefit of Tailwind's JIT mode?

A It disables CSS animations for faster rendering.

B It preloads all CSS classes to avoid delays.

C It generates only the CSS classes used, reducing CSS file size.

D It bundles CSS and JS into one file.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check the size of the Tailwind CSS file.

What to look for: Smaller CSS file size indicates JIT mode is working; large CSS file means classic mode or unused styles.