JIT mode and on-demand generation in Tailwind - Browser Rendering Trace

Render Flow - JIT mode and on-demand generation

Read HTML with Tailwind classes

↓

Scan classes in HTML

↓

Generate only used CSS rules

↓

Inject generated CSS into page

↓

Browser renders styled elements

Tailwind's JIT mode scans your HTML for used classes and generates only those CSS rules on demand, making the page load faster and styles update instantly.

Render Steps - 4 Steps

Code Added:Add button element with Tailwind classes

Before

[ ]
(empty page)

→

After

[Button]
[ Click me ]
(background: none, text: default)

The button appears with default browser styles because no Tailwind CSS is applied yet.

🔧 Browser Action:Parse HTML and create DOM element

Code Sample

A blue button with white text that darkens on hover, styled using Tailwind JIT-generated CSS classes.

Tailwind

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

/* JIT generates only used classes like bg-blue-500, hover:bg-blue-700, etc. */

Render Quiz - 3 Questions

After step 2, what visual change do you see on the button?

A Button background turns blue and text becomes white

B Button text becomes bold only

C Button has rounded corners

D Button background darkens on hover

Common Confusions - 3 Topics

Why do I see no styles if I add a new Tailwind class in HTML?

In JIT mode, Tailwind only generates CSS for classes it finds in your files during build or dev server. If your new class is not detected (e.g., dynamically generated or typo), no CSS is created, so no style appears.

💡 Always write full class names in your HTML or configure safelist to include dynamic classes.

Why does the hover effect not work sometimes?

Hover styles are generated only if the hover: prefix class is present in your HTML. If you forget to add hover: before the class, Tailwind won't generate the hover CSS.

💡 Use the exact hover: prefix in your class names to get hover styles.

Why is my page size smaller with JIT mode?

JIT mode generates only the CSS you use, so your stylesheet is much smaller than generating all Tailwind utilities upfront, making your page load faster.

💡 Less CSS means faster loading and better performance.

Property Reference

Property	Value Applied	Visual Effect	Common Use
bg-blue-500	background-color: #3b82f6	Button background is bright blue	Primary button background
hover:bg-blue-700	background-color: #1d4ed8 on hover	Background darkens on mouse hover	Hover effect for buttons
text-white	color: #ffffff	Text color becomes white	Readable text on colored backgrounds
font-bold	font-weight: 700	Text appears bold	Emphasize text
py-2	padding-top and padding-bottom: 0.5rem	Vertical padding inside element	Button padding
px-4	padding-left and padding-right: 1rem	Horizontal padding inside element	Button padding
rounded	border-radius: 0.25rem	Rounded corners on element	Softens button edges

Concept Snapshot

Tailwind JIT mode scans your HTML and generates only the CSS classes you use. This makes styles load faster and updates instantly. Classes like bg-blue-500, hover:bg-blue-700, font-bold are generated on demand. Hover states require hover: prefix to generate CSS. JIT reduces CSS file size and improves performance.