Utility-first approach vs traditional CSS in Tailwind - Hands-On Comparison

Build a Responsive Card Using Utility-First Tailwind CSS

📖 Scenario: You are creating a simple card component for a website. The card should have a title, an image, and a description. You will build this card using Tailwind CSS utility classes step-by-step to understand the utility-first approach compared to traditional CSS.

🎯 Goal: Build a responsive card component using Tailwind CSS utility classes that looks neat and adjusts well on different screen sizes.

📋 What You'll Learn

Use Tailwind CSS utility classes for styling

Create a card with a title, image, and description

Make the card responsive using Tailwind's responsive utilities

Avoid writing custom CSS styles

💡 Why This Matters

🌍 Real World

Creating reusable UI components quickly for websites and apps using utility-first CSS frameworks like Tailwind.

💼 Career

Front-end developers often use Tailwind CSS to speed up styling and ensure consistent design without writing custom CSS.

1

Create the HTML structure for the card

Write the HTML code to create a <section> element with a class card. Inside it, add an <h2> with the text Beautiful Sunset, an <img> with src="https://via.placeholder.com/300x200" and alt="Sunset image", and a <p> with the text A breathtaking view of the sunset over the mountains..

Tailwind

Hint

Remember to use semantic HTML tags: <section>, <h2>, <img>, and <p>.

2

Add Tailwind utility classes for basic styling

Add Tailwind CSS utility classes to the <section> element to give it a white background with bg-white, rounded corners with rounded-lg, shadow with shadow-md, and padding with p-4. Also, add text-xl font-semibold mb-2 classes to the <h2> for bigger, bold text with margin below.

Tailwind

  
  Beautiful Sunset
  
  A breathtaking view of the sunset over the mountains.

Hint

Use Tailwind classes directly in the class attribute to style elements without writing CSS.

3

Make the image responsive and add spacing

Add Tailwind classes to the <img> to make it full width with w-full, rounded corners with rounded-md, and margin below with mb-3. Add text-gray-700 class to the <p> to make the text a soft gray color.

Tailwind

  Beautiful Sunset
  
  
  
  A breathtaking view of the sunset over the mountains.

Hint

Use w-full to make images scale to container width and mb-3 for margin below.

4

Add responsive design with Tailwind breakpoints

Add the class max-w-sm mx-auto to the <section> to limit the card width and center it horizontally. Add the class sm:flex sm:items-center to the <section> to make the card layout horizontal on small screens and above. Add sm:mb-0 sm:mr-4 to the <img> to remove bottom margin and add right margin on small screens and above.

Tailwind

  
  Beautiful Sunset
  
  A breathtaking view of the sunset over the mountains.

Hint

Use Tailwind's responsive prefixes like sm: to change styles on small screens and larger.

Practice

1. What is the main idea behind the utility-first CSS approach?

easy

A. Avoid using any classes and rely only on browser default styles

B. Write all styles in a separate CSS file and link it to HTML

C. Use inline styles inside HTML tags for all styling

D. Use small, single-purpose classes directly in HTML to style elements quickly

Solution

1. Step 1: Understand utility-first CSS concept

   Utility-first CSS means applying many small classes directly in HTML to style elements quickly without writing separate CSS rules.

2. Step 2: Compare with other options

   Options B and C describe traditional CSS and inline styles, which are different from utility-first. Avoid using any classes and rely only on browser default styles is incorrect as it ignores styling.

3. Final Answer:

   Use small, single-purpose classes directly in HTML to style elements quickly -> Option D

4. Quick Check:

   Utility-first = small classes in HTML [OK]

Hint: Utility-first means styling with many small classes in HTML [OK]

Common Mistakes:

• Confusing utility-first with inline styles
• Thinking utility-first requires separate CSS files
• Believing utility-first avoids using classes

2. Which of the following is the correct way to add a Tailwind utility class for padding of 4 units?

easy

A. <div class='padding-4'></div>

B. <div class='p-4'></div>

C. <div class='pad-4'></div>

D. <div class='padding4'></div>

Solution

1. Step 1: Recall Tailwind padding syntax

   Tailwind uses short utility classes like p-4 for padding of 4 units.

2. Step 2: Check each option

   Options A, B, and D use incorrect class names not recognized by Tailwind.

3. Final Answer:

   <div class='p-4'></div> -> Option B

4. Quick Check:

   Padding 4 in Tailwind = p-4 [OK]

Hint: Tailwind uses short class names like p-4 for padding [OK]

Common Mistakes:

• Using full words like 'padding' instead of shorthand
• Adding numbers without dash (e.g., padding4)
• Confusing Tailwind with traditional CSS class names

3. Given this HTML snippet using Tailwind:

<button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'>Click Me</button>

What happens when you hover the button with the mouse?

medium

A. The button background color changes to a darker blue

B. The button text color changes to black

C. The button becomes larger in size

D. Nothing changes on hover

Solution

1. Step 1: Understand the hover class

   The class hover:bg-blue-700 changes the background color to blue-700 when hovered.

2. Step 2: Check other styles

   Text color stays white, no size change classes are present, so only background changes on hover.

3. Final Answer:

   The button background color changes to a darker blue -> Option A

4. Quick Check:

   hover:bg-blue-700 changes background on hover [OK]

Hint: hover: prefix changes style on mouse hover [OK]

Common Mistakes:

• Thinking text color changes on hover
• Expecting size changes without size classes
• Ignoring the hover: prefix effect

4. You wrote this HTML with Tailwind:

<div class='text-center bg-red-500 p-4'>Hello</div>

But the text is not centered in the browser. What is the likely problem?

medium

A. Tailwind CSS file is not linked or loaded properly

B. The class text-center is misspelled

C. The bg-red-500 class removes text centering

D. Padding p-4 prevents text centering

Solution

1. Step 1: Verify class correctness

   The class text-center is spelled correctly and should center text.

2. Step 2: Consider CSS loading

   If styles don't apply, the Tailwind CSS file might not be linked or loaded, causing no styling effect.

3. Final Answer:

   Tailwind CSS file is not linked or loaded properly -> Option A

4. Quick Check:

   Missing CSS file = no styles applied [OK]

Hint: Check if Tailwind CSS file is loaded when styles don't apply [OK]

Common Mistakes:

• Blaming utility classes for layout issues
• Ignoring missing or wrong CSS file links
• Assuming padding affects text alignment

5. You want to create a responsive card with a shadow and rounded corners using Tailwind. Which combination of classes correctly applies these styles and also adds a hover effect to increase shadow intensity?

hard

A. <div class='shadow rounded-none hover:shadow-lg p-6'>Card</div>

B. <div class='box-shadow rounded hover:shadow-xl p-6'>Card</div>

C. <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div>

D. <div class='shadow-md rounded-full hover:shadow-2xl p-6'>Card</div>

Solution

1. Step 1: Identify correct shadow and rounded classes

   Tailwind uses shadow-sm, shadow, shadow-md, etc. for shadows. rounded adds normal rounded corners.

2. Step 2: Check hover shadow intensity

   Hover classes like hover:shadow-lg increase shadow on hover. <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div> uses shadow-sm with hover:shadow-lg, a common pattern for subtle to stronger shadow on hover.

3. Step 3: Evaluate other options

   <div class='shadow rounded hover:shadow-lg p-6'>Card</div> uses shadow but no size specified; <div class='box-shadow rounded hover:shadow-xl p-6'>Card</div> uses invalid box-shadow class; <div class='shadow-md rounded-full hover:shadow-2xl p-6'>Card</div> uses rounded-full which makes circle corners, not typical card style.

4. Final Answer:

   <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div> -> Option C

5. Quick Check:

   shadow-sm + hover:shadow-lg = subtle to strong shadow on hover [OK]

Hint: Use shadow-sm with hover:shadow-lg for subtle to stronger shadow [OK]

Common Mistakes:

• Using invalid class names like box-shadow
• Choosing rounded-full for normal cards
• Not adding hover: prefix for hover effects