JIT mode and on-demand generation in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does JIT stand for in Tailwind CSS?

JIT stands for Just-In-Time. It means Tailwind generates CSS styles only when they are needed, making the build faster and the CSS file smaller.

beginner

How does on-demand generation improve Tailwind CSS performance?

On-demand generation creates CSS classes only for the styles you use in your HTML or templates, reducing unused CSS and speeding up loading times.

intermediate

What is the main difference between Tailwind's JIT mode and the traditional build mode?

Traditional mode generates all possible CSS classes upfront, while JIT mode generates classes as you write them, making development faster and CSS smaller.

intermediate

How do you enable JIT mode in Tailwind CSS?

In Tailwind CSS v3 and later, JIT mode is enabled by default. For earlier versions, you add 'mode: "jit"' in the tailwind.config.js file.

beginner

Why is JIT mode helpful during development?

JIT mode gives instant feedback by generating styles as you type, so you see changes immediately without waiting for a full rebuild.

What happens when you use a new class in Tailwind CSS with JIT mode enabled?

A You must restart the build process to see the class.

B The CSS for that class is generated immediately.

C The class is ignored until manually added to CSS.

D All classes are generated at once regardless.

With JIT mode, Tailwind generates CSS for new classes as soon as you use them.

Which Tailwind CSS version has JIT mode enabled by default?

A v1.0

B v4.0

C v2.0

D v3.0

Tailwind CSS version 3.0 and later have JIT mode enabled by default.

What is a benefit of on-demand CSS generation?

A Larger CSS files

B Slower page load

C Smaller CSS files

D More unused styles

On-demand generation creates only the CSS you use, making files smaller.

How does JIT mode affect development speed?

A Speeds it up by generating styles instantly

B No effect on speed

C Slows it down due to full rebuilds

D Requires manual CSS updates

JIT mode speeds up development by generating styles instantly as you write code.

If you want to use a class not in your HTML, what must you do in JIT mode?

A Add it to the safelist in tailwind.config.js

B Nothing, it generates automatically

C Write it in a separate CSS file

D Restart the server

Classes not found in your files must be safelisted to be generated in JIT mode.

Explain how Tailwind CSS JIT mode works and why it is useful.

Think about when CSS classes are created and how that helps your workflow.

Describe the difference between traditional Tailwind CSS builds and JIT mode.

Focus on when CSS is generated in each mode.