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

Need a 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

Need a 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

Need a 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


  
    
  

Need a 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.