Width utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind Width Classes

Which Tailwind CSS class sets an element's width to exactly 50% of its parent container?

A w-1/2

B w-50

C w-1/4

D w-full

💡 Hint

Tailwind uses fractions like 1/2 to represent percentages of width.

The class w-1/2 sets the width to 50% of the parent. w-50 is not a valid Tailwind width class. w-1/4 sets width to 25%, and w-full sets width to 100%.

📝 Syntax

intermediate

Identify the Correct Tailwind Width Class Syntax

Which option correctly applies a fixed width of 16rem using Tailwind CSS?

A w-16

B w-1/16

C w-[16rem]

D width-16rem

💡 Hint

Tailwind uses square brackets for arbitrary values.

w-[16rem] applies a fixed width of 16rem using Tailwind's arbitrary value syntax. w-16 applies a width of 4rem (based on Tailwind spacing scale). width-16rem is invalid syntax. w-1/16 is not a valid fraction class.

❓ rendering

advanced

Predict the Visual Width Result

Given this HTML snippet with Tailwind classes:

<div class="w-1/3 bg-blue-500 h-16">Box</div>

What fraction of the parent container's width will the blue box occupy?

A One third (33.33%)

B One half (50%)

C Full width (100%)

D One quarter (25%)

💡 Hint

The class w-1/3 means one third width.

The class w-1/3 sets the width to one third of the parent container. The background color and height do not affect width.

❓ selector

advanced

Choosing the Correct Width Utility for Responsive Design

You want a div to be full width on small screens but only 25% width on large screens using Tailwind CSS. Which class combination achieves this?

A w-1/4 sm:w-full

B w-full lg:w-1/4

C w-full md:w-1/2

D w-1/4 lg:w-full

💡 Hint

Tailwind uses prefixes like lg: to apply styles at larger screen sizes.

w-full lg:w-1/4 means the div is full width by default (small screens) and changes to 25% width on large screens. Other options either reverse the order or use wrong breakpoints.

❓ accessibility

expert

Accessibility Impact of Width Utilities

Which statement best explains how improper use of Tailwind width utilities can affect accessibility?

A Applying width classes disables keyboard navigation on the element.

B Using width utilities only affects visual style and has no impact on accessibility.

C Width utilities automatically adjust for all users, so no accessibility concerns exist.

D Setting fixed widths without considering viewport can cause content to be cut off or require horizontal scrolling, making it harder for keyboard and screen reader users.

💡 Hint

Think about how fixed widths behave on small screens and assistive technologies.

Fixed widths that don't adapt can cause horizontal scrolling or clipped content, which is difficult for keyboard users and screen readers. Width utilities affect layout and must be used responsively for accessibility.

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