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.

Practice

1. What does the Tailwind CSS class h-16 do to an element?

easy

A. Sets the element's height to 4rem

B. Sets the element's width to 16rem

C. Sets the element's minimum height to 16rem

D. Sets the element's maximum height to 4rem

Solution

1. Step 1: Understand Tailwind height scale

   In Tailwind, h-16 sets height using a spacing scale where 16 equals 4rem.

2. Step 2: Confirm the effect on element

   The class fixes the element's height exactly to 4rem, not width or min/max height.

3. Final Answer:

   Sets the element's height to 4rem -> Option A

4. Quick Check:

   h-16 = height 4rem [OK]

Hint: Remember h-16 means height 4rem in Tailwind scale [OK]

Common Mistakes:

• Confusing height with width classes
• Mixing fixed height with min or max height
• Assuming h-16 means 16rem instead of 4rem

2. Which of the following is the correct Tailwind class to set an element's minimum height to 100% of its parent?

easy

A. min-h-full

B. h-min-full

C. max-h-full

D. min-height-full

Solution

1. Step 1: Identify correct prefix for minimum height

   Tailwind uses min-h- prefix for minimum height utilities.

2. Step 2: Confirm the correct suffix for 100%

   full means 100% of the parent size, so min-h-full sets min-height to 100%.

3. Final Answer:

   min-h-full -> Option A

4. Quick Check:

   min-h-full = min-height 100% [OK]

Hint: min-h-full means minimum height 100% [OK]

Common Mistakes:

• Using wrong prefix like h-min-full
• Confusing max-h-full with min-h-full
• Writing non-existent class min-height-full

3. Given this HTML snippet:

<div class="max-h-24 overflow-auto">Content</div>

What will happen if the content inside the div is taller than 6rem?

medium

A. The div height will grow beyond 6rem and show all content

B. The div height will be fixed at 24rem with no scrollbar

C. The div height will be limited to 6rem and show a scrollbar

D. The div height will collapse to 0 because of overflow-auto

Solution

1. Step 1: Understand max-h-24 meaning

   max-h-24 sets maximum height to 6rem (24 x 0.25rem).

2. Step 2: Effect of overflow-auto with max height

   If content is taller than max height, overflow-auto adds a scrollbar inside the div.

3. Final Answer:

   The div height will be limited to 6rem and show a scrollbar -> Option C

4. Quick Check:

   max-h-24 + overflow-auto = max height 6rem with scrollbar [OK]

Hint: max-h sets max height; overflow-auto adds scrollbar if needed [OK]

Common Mistakes:

• Thinking max-h-24 sets fixed height
• Ignoring overflow-auto effect
• Assuming height grows beyond max-h

4. You want to set an element's height to exactly 5rem using Tailwind CSS, but your code uses h-20 and the height is too large. What is the mistake?

medium

A. h-20 sets height to 5rem, so no mistake

B. h-20 sets height to 5rem, but you should use h-12 for 5rem

C. h-20 sets height to 5rem, but you need min-h-20

D. h-20 sets height to 20rem, which is too large

Solution

1. Step 1: Check Tailwind spacing scale for h-20

   In Tailwind, h-20 means height of 5rem (20 x 0.25rem = 5rem), so this matches the desired height.

2. Step 2: Re-examine the problem statement

   The question says height is too large, so likely the user confused the scale or used a wrong unit.

3. Step 3: Clarify the mistake

   Actually, h-20 is 5rem, so if height is too large, the user might have used a custom scale or misunderstood the unit.

4. Final Answer:

   h-20 sets height to 20rem, which is too large -> Option D

5. Quick Check:

   h-20 = 20rem too large [OK]

Hint: Check Tailwind spacing scale: h-20 equals 5rem [OK]

Common Mistakes:

• Assuming h-20 means 20rem
• Confusing h-20 with h-5
• Using min-h or max-h instead of h

5. You want a responsive div that has a fixed height of 8rem on small screens, but on medium screens and above, it should have a maximum height of 12rem and scroll if content overflows. Which Tailwind classes achieve this?

hard

A. h-8 md:max-h-12 md:overflow-scroll

B. h-32 md:max-h-48 md:overflow-auto

C. h-32 md:max-h-48 md:overflow-scroll

D. h-8 md:max-h-48 md:overflow-auto

Solution

1. Step 1: Convert rem to Tailwind scale

   8rem = 32 x 0.25rem, so h-32 sets height 8rem. 12rem = 48 x 0.25rem, so max-h-48 sets max height 12rem.

2. Step 2: Apply responsive prefixes and overflow

   On small screens, fixed height 8rem means h-32. On medium screens and above, max height 12rem with scroll means md:max-h-48 md:overflow-auto.

3. Step 3: Match options with correct classes

   h-32 md:max-h-48 md:overflow-auto uses correct classes for fixed height and responsive max height with scroll. Other options have incorrect scales or overflow behavior.

4. Final Answer:

   h-32 md:max-h-48 md:overflow-auto -> Option B

5. Quick Check:

   h-32 = 8rem, md:max-h-48 = 12rem max height, overflow-auto adds scrollbar [OK]

Hint: Convert rem to Tailwind scale: 1rem = 4 units [OK]

Common Mistakes:

• Mixing rem values with wrong Tailwind scale
• Using overflow-scroll instead of overflow-auto
• Wrong responsive prefixes