Height utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class sets an element's height to 6rem?

Choose the Tailwind CSS class that sets the height of an element to exactly 6rem.

A h-24

B h-20

C h-12

D h-16

💡 Hint

Tailwind's height scale uses multiples of 0.25rem. For example, h-4 is 1rem.

In Tailwind CSS, h-24 sets height to 6rem because 24 * 0.25rem = 6rem.

Other options correspond to different rem values.

❓ rendering

intermediate

What is the visible height of a div with class h-screen?

If a div has the Tailwind class h-screen, what height will it have relative to the browser window?

Tailwind

<div class="h-screen bg-blue-300">Content</div>

A Height equals 100% of the parent element's height.

B Height is fixed at 100 pixels.

C Height equals the full height of the viewport (browser window).

D Height is automatically adjusted to content size.

💡 Hint

Think about what 'screen' means in Tailwind height utilities.

The h-screen class sets the element's height to 100vh, which means 100% of the viewport height.

🧠 Conceptual

advanced

Which Tailwind class sets height to 50% of the parent element?

Select the Tailwind CSS class that sets an element's height to exactly half of its parent container's height.

A h-3/5

B h-1/4

C h-2/3

D h-1/2

💡 Hint

Tailwind uses fraction classes like h-1/2 for percentage heights.

The class h-1/2 sets height to 50% of the parent element.

Other fractions represent different percentages.

❓ accessibility

advanced

Why should you avoid fixed height classes like h-64 for content containers?

Choose the best reason why using fixed height utilities like h-64 on content containers can cause accessibility issues.

A Fixed heights can cause content to overflow and be cut off, making it inaccessible to keyboard and screen reader users.

B Fixed heights improve accessibility by forcing consistent layout across devices.

C Fixed heights automatically add scrollbars which are always accessible.

D Fixed heights prevent color contrast issues.

💡 Hint

Think about what happens if content is taller than a fixed height container.

Using fixed heights can cause content to overflow and be hidden, which is bad for users relying on keyboard navigation or screen readers.

Flexible heights or min-height are better for accessibility.

📝 Syntax

expert

What error occurs if you write h-1/2 as h-1\/2 in Tailwind config?

If you mistakenly escape the slash in a Tailwind height class like h-1\/2 in your HTML, what will happen when the page renders?

Tailwind

<div class="h-1\/2 bg-red-200">Test</div>

A The element will have height 50% as intended.

B The class will not apply, so the element will have default height (auto).

C The browser will throw a syntax error and not render the page.

D The element will have height 1px.

💡 Hint

Tailwind class names must match exactly; escaping slashes is not needed in HTML class attributes.

Escaping the slash breaks the class name, so Tailwind does not recognize it and does not apply the height.

The element falls back to default height.