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.

Practice

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

easy

A. It preloads all possible CSS classes to avoid delays.

B. It generates only the CSS classes you actually use, making the site faster.

C. It disables CSS generation to speed up development.

D. It automatically converts CSS to JavaScript.

Solution

1. Step 1: Understand JIT mode purpose

   JIT mode creates CSS only for classes used in your files, not all possible classes.

2. Step 2: Compare options

   It generates only the CSS classes you actually use, making the site faster. matches this behavior; others describe incorrect or unrelated features.

3. Final Answer:

   It generates only the CSS classes you actually use, making the site faster. -> Option B

4. Quick Check:

   JIT mode = on-demand CSS generation [OK]

Hint: JIT means generate CSS only when needed [OK]

Common Mistakes:

• Thinking JIT preloads all CSS
• Confusing JIT with disabling CSS
• Assuming JIT converts CSS to JS

2. Which Tailwind config snippet correctly enables JIT mode?

easy

A. module.exports = { mode: 'jit', paths: ['./src/**/*.{html,js}'] }

B. module.exports = { jit: true, files: ['./src/**/*.{html,js}'] }

C. module.exports = { mode: 'fast', content: ['./src/**/*.{html,js}'] }

D. module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] }

Solution

1. Step 1: Identify correct config keys

   Tailwind uses mode: 'jit' and content array for files.

2. Step 2: Check options

   Only module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] } uses correct keys and values; others use wrong keys or values.

3. Final Answer:

   module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] } -> Option D

4. Quick Check:

   Config keys = mode and content [OK]

Hint: Use mode: 'jit' and content array in config [OK]

Common Mistakes:

• Using wrong keys like jit or files
• Setting mode to 'fast' instead of 'jit'
• Using 'paths' instead of 'content'

3. Given this Tailwind config with JIT mode:

module.exports = { mode: 'jit', content: ['./index.html'] }

And this HTML:

<div class="bg-blue-500 p-4">Hello</div>

What CSS classes will be generated?

medium

A. Only styles for bg-blue-500 and p-4 classes.

B. All background and padding classes from Tailwind.

C. No CSS classes because JIT is disabled.

D. Only bg-blue-500 class styles, not p-4.

Solution

1. Step 1: Understand JIT CSS generation

   JIT mode generates CSS only for classes found in the content files.

2. Step 2: Check classes in HTML

   Classes bg-blue-500 and p-4 appear, so their styles are generated.

3. Final Answer:

   Only styles for bg-blue-500 and p-4 classes. -> Option A

4. Quick Check:

   JIT generates CSS only for used classes [OK]

Hint: JIT generates CSS only for classes in your files [OK]

Common Mistakes:

• Thinking all classes generate CSS
• Assuming JIT disables CSS generation
• Believing partial classes generate partial CSS

4. You enabled JIT mode but your new CSS classes are not applying after editing HTML. What is the likely cause?

medium

A. JIT mode requires restarting the browser manually.

B. You forgot to install Tailwind CSS.

C. The content array in Tailwind config does not include the edited files.

D. Tailwind CSS does not support dynamic class names.

Solution

1. Step 1: Check JIT file watching setup

   JIT mode watches files listed in content to generate CSS on changes.

2. Step 2: Identify cause of missing CSS

   If edited files are not in content, JIT won't generate CSS for new classes.

3. Final Answer:

   The content array in Tailwind config does not include the edited files. -> Option C

4. Quick Check:

   Content array must include all source files [OK]

Hint: Always list all source files in content array [OK]

Common Mistakes:

• Forgetting to update content array
• Assuming JIT needs browser restart
• Thinking Tailwind lacks dynamic class support

5. You want to use a dynamic class name in your HTML like bg-${color}-500 where color is a variable. How can you ensure Tailwind JIT generates the correct CSS?

hard

A. Add all possible classes like bg-red-500, bg-blue-500 explicitly in your files or safelist in config.

B. JIT automatically detects dynamic class names and generates CSS for all variations.

C. Disable JIT mode to generate all CSS classes at once.

D. Use inline styles instead of Tailwind classes for dynamic colors.

Solution

1. Step 1: Understand JIT limitation with dynamic classes

   JIT cannot detect dynamic class names built from variables in code.

2. Step 2: Provide all possible classes explicitly

   You must list all possible class names in your files or use the safelist option in Tailwind config.

3. Final Answer:

   Add all possible classes like bg-red-500, bg-blue-500 explicitly in your files or safelist in config. -> Option A

4. Quick Check:

   Dynamic classes need explicit listing or safelist [OK]

Hint: List all dynamic classes or safelist them in config [OK]

Common Mistakes:

• Expecting JIT to detect dynamic classes automatically
• Disabling JIT unnecessarily
• Using inline styles instead of Tailwind classes