JIT mode and on-demand generation in Tailwind - Mini Project: Build & Apply

Build a Responsive Card Layout Using Tailwind JIT Mode

📖 Scenario: You are creating a simple responsive card layout for a website. You want to use Tailwind CSS with JIT mode enabled so that only the styles you use are generated on-demand. This keeps your CSS file small and your site fast.

🎯 Goal: Build a responsive card layout with three cards side-by-side on large screens and stacked on small screens using Tailwind CSS classes. Use JIT mode to generate only the needed styles.

📋 What You'll Learn

Create a basic HTML structure with a container and three cards

Use Tailwind CSS utility classes for layout and styling

Apply responsive classes to stack cards on small screens and align horizontally on large screens

Use JIT mode to generate styles on-demand without writing custom CSS

💡 Why This Matters

🌍 Real World

Responsive card layouts are common on websites for displaying products, articles, or features. Using Tailwind JIT mode helps keep the CSS file small and fast-loading by generating only the styles you use.

💼 Career

Many web development jobs require building responsive layouts efficiently. Knowing how to use Tailwind CSS with JIT mode is valuable for creating fast, maintainable UI designs.

1

Create the HTML container and three card divs

Create a <div> with class container mx-auto p-4. Inside it, create three <div> elements each with class bg-white shadow rounded p-6. These will be the cards.

Tailwind

Hint

Use the container class for a centered layout with padding. Each card should have white background, shadow, rounded corners, and padding.

2

Add a flex container to arrange cards horizontally on large screens

Wrap the three card <div> elements inside a <div> with class flex flex-col lg:flex-row gap-4 to stack cards vertically on small screens and horizontally on large screens with spacing.

Tailwind

Hint

Use flex flex-col for vertical stacking by default and lg:flex-row to switch to horizontal layout on large screens. Use gap-4 for spacing between cards.

3

Add responsive width classes to cards for equal sizing on large screens

Add the class lg:w-1/3 to each card <div> so that on large screens each card takes one-third of the container width.

Tailwind

Hint

Use lg:w-1/3 on each card to make them each take one-third width on large screens.

4

Enable JIT mode in Tailwind config and add a background color to cards

Add mode: 'jit' in your tailwind.config.js file to enable JIT mode. Then add the class bg-blue-100 to each card <div> to give them a light blue background color.

Tailwind

// In tailwind.config.js
// Add mode: 'jit' here


  
    
  

Hint

In tailwind.config.js, add mode: 'jit' at the top level. Then add bg-blue-100 to each card's class list for a light blue background.

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