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.