Width utilities in Tailwind - Mini Project: Build & Apply

Width Utilities with Tailwind CSS

📖 Scenario: You are building a simple responsive card layout for a website. Each card should have a specific width using Tailwind CSS width utilities to control how wide the cards appear on the page.

🎯 Goal: Create three cards using <div> elements. Use Tailwind CSS width utilities to set the first card to w-1/4, the second card to w-1/2, and the third card to w-3/4. This will show how different width utilities affect the card sizes.

📋 What You'll Learn

Use Tailwind CSS width utilities w-1/4, w-1/2, and w-3/4 on three separate cards.

Each card should have a visible border and some padding for clarity.

Use semantic HTML with a <main> container for the cards.

Make sure the cards stack vertically on small screens and show their widths clearly.

💡 Why This Matters

🌍 Real World

Web developers often need to control the width of elements to create clean, responsive layouts. Tailwind CSS width utilities make this fast and easy without writing custom CSS.

💼 Career

Knowing how to use Tailwind width utilities is valuable for front-end developers working on modern web projects, improving productivity and consistency in styling.

1

Create the HTML structure with three cards

Create a <main> element containing three <div> elements with the classes border and p-4. Do not add width classes yet.

Tailwind

Need a hint?

Use a <main> container and inside it create three <div> elements with the classes border and p-4. Add simple text like 'Card 1', 'Card 2', and 'Card 3' inside each card.

2

Add width utility for the first card

Add the Tailwind CSS width utility class w-1/4 to the first <div> card inside the <main> element.

Tailwind

  
    Card 1
  
  
    Card 2
  
  
    Card 3
  

Need a hint?

Find the first card's <div> and add the class w-1/4 to set its width to one quarter of the container.

3

Add width utilities for the second and third cards

Add the Tailwind CSS width utility class w-1/2 to the second card's <div> and w-3/4 to the third card's <div> inside the <main> element.

Tailwind

  
    Card 1
  
  
    Card 2
  
  
    Card 3
  

Need a hint?

Add w-1/2 to the second card's <div> and w-3/4 to the third card's <div> to set their widths.

4

Make cards stack vertically on small screens

Add the Tailwind CSS class flex flex-col gap-4 to the <main> element to stack the cards vertically with space between them.

Tailwind

  
    Card 1
  
  
    Card 2
  
  
    Card 3
  

Need a hint?

Use flex flex-col gap-4 on the <main> container to stack the cards vertically with some space between them.