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

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

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

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

Need a hint?

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