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.