JIT mode and on-demand generation in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Tailwind JIT mode generate styles?

Tailwind CSS uses JIT mode to create styles. What best describes how it works?

A It generates styles only for the classes you use in your files as you write them.

B It generates all possible styles upfront before you start coding.

C It downloads styles from a CDN when the page loads.

D It uses inline styles instead of CSS classes.

💡 Hint

Think about how Tailwind avoids creating unused CSS.

JIT mode scans your files and generates CSS only for the classes you actually use. This makes the CSS file smaller and faster.

📝 Syntax

intermediate

Which Tailwind config enables JIT mode?

You want to enable JIT mode in Tailwind CSS. Which config snippet is correct?

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

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

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

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

💡 Hint

Look for the correct property name and value to enable JIT.

To enable JIT mode, you set mode: 'jit' in the Tailwind config and specify the content files.

❓ rendering

advanced

What is the rendered output of this Tailwind JIT example?

Given this HTML snippet using Tailwind classes with JIT mode enabled, what CSS color will the text have?

Tailwind

<p class="text-red-500 hover:text-blue-700">Hello World</p>

A The text is blue normally and turns red on hover.

B The text is red normally and turns blue on hover.

C The text is always black because hover classes are ignored.

D The text color does not change because JIT mode disables hover styles.

💡 Hint

Think about how Tailwind generates hover styles on demand.

Tailwind JIT generates styles for text-red-500 and hover:text-blue-700. So the text is red normally and blue on hover.

❓ selector

advanced

Which Tailwind class triggers JIT to generate a 3rem margin?

You want to add a margin of 3rem using Tailwind JIT. Which class name will generate this margin?

A m-24

B m-3

C m-6

D m-12

💡 Hint

Tailwind spacing scale uses multiples of 0.25rem. Calculate 3rem in this scale.

Tailwind spacing scale: 1 = 0.25rem, so 12 × 0.25rem = 3rem. Therefore, m-12 sets margin to 3rem.

❓ accessibility

expert

How does Tailwind JIT help maintain accessibility with dynamic classes?

When using Tailwind JIT with dynamic class names (e.g., text-${color}-500), what must you do to ensure accessibility and correct CSS generation?

A Use only static class names because JIT cannot handle dynamic classes at all.

B Disable JIT mode to allow dynamic classes to work automatically.

C List all possible dynamic class variants explicitly in the content config for JIT to generate them.

D Write inline styles instead of classes to avoid JIT issues.

💡 Hint

Think about how JIT scans files to find classes.

Tailwind JIT scans your files for class names. Dynamic classes must be listed or included in safelist to generate CSS, ensuring styles and accessibility features are present.

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