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

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
  

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
  

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
  

Hint

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

Practice

1. Which Tailwind class sets an element's width to 100% of its parent container?

easy

A. w-full

B. w-auto

C. w-1/2

D. w-0

Solution

1. Step 1: Understand the meaning of w-full

   The class w-full sets the width to 100% of the parent container.

2. Step 2: Compare with other options

   w-auto lets width adjust to content, w-1/2 sets width to 50%, and w-0 sets width to zero.

3. Final Answer:

   w-full -> Option A

4. Quick Check:

   Full width = w-full [OK]

Hint: Full width always uses w-full class [OK]

Common Mistakes:

• Confusing w-auto with full width
• Thinking w-1/2 means full width
• Using w-0 expecting full width

2. Which of these is the correct Tailwind class to set an element's width to 25%?

easy

A. w-1/4

B. w-1/3

C. w-1/2

D. w-3/4

Solution

1. Step 1: Recall fraction width classes in Tailwind

   w-1/4 means width is 1/4 or 25% of the parent container.

2. Step 2: Verify other options

   w-1/3 is about 33%, w-1/2 is 50%, and w-3/4 is 75% width.

3. Final Answer:

   w-1/4 -> Option A

4. Quick Check:

   25% width = w-1/4 [OK]

Hint: Fraction classes use w-1/4, w-1/2, etc. [OK]

Common Mistakes:

• Mixing up w-1/3 with 25%
• Using w-3/4 expecting 25%
• Forgetting fraction syntax

3. What width will the following element have?

<div class="w-3/5">Content</div>

medium

A. 75% of the parent container

B. 50% of the parent container

C. 60% of the parent container

D. 100% of the parent container

Solution

1. Step 1: Understand the class w-3/5

   This class sets the width to 3 parts out of 5, which is 60% of the parent container.

2. Step 2: Compare with other options

   50% is w-1/2, 75% is w-3/4, and 100% is w-full.

3. Final Answer:

   60% of the parent container -> Option C

4. Quick Check:

   w-3/5 = 60% width [OK]

Hint: Divide numerator by denominator in fraction class [OK]

Common Mistakes:

• Assuming w-3/5 means 3%
• Confusing with w-1/2
• Ignoring fraction meaning

4. Identify the error in this Tailwind width usage:

<div class="w-7/3">Box</div>

medium

A. Fraction denominator cannot be greater than numerator

B. Fraction denominator cannot be zero

C. Fraction numerator cannot be greater than denominator

D. Tailwind does not support fractions greater than 1

Solution

1. Step 1: Analyze the fraction 7/3 in Tailwind width

   Tailwind width fractions represent parts of the parent width and must be between 0 and 1 (numerator ≤ denominator).

2. Step 2: Check Tailwind support for fractions > 1

   Tailwind does not support fractions greater than 1 for width utilities; w-7/3 is invalid.

3. Final Answer:

   Tailwind does not support fractions greater than 1 -> Option D

4. Quick Check:

   Width fractions must be ≤ 1 [OK]

Hint: Width fractions must be ≤ 1 in Tailwind [OK]

Common Mistakes:

• Thinking numerator must be less than denominator
• Assuming denominator can't be zero (not relevant here)
• Using invalid fraction > 1

5. You want a responsive layout where a box is full width on small screens but 1/3 width on medium and larger screens. Which Tailwind classes achieve this?

<div class="?">Box</div>

hard

A. w-1/3 md:w-full

B. w-full md:w-1/3

C. w-auto md:w-1/3

D. w-1/3 w-full

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   md: prefix applies styles at medium screen sizes and above.

2. Step 2: Set full width by default and 1/3 width on medium screens

   Use w-full for small screens and md:w-1/3 for medium+ screens.

3. Final Answer:

   w-full md:w-1/3 -> Option B

4. Quick Check:

   Default full, medium 1/3 = w-full md:w-1/3 [OK]

Hint: Use responsive prefix like md: for screen size changes [OK]

Common Mistakes:

• Reversing order of widths
• Not using responsive prefix
• Using w-auto instead of fixed width