Bird
Raised Fist0
Tailwindmarkup~5 mins

Height utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Height utilities help you quickly set the height of elements on your webpage. They make your design consistent and easy to change.

When you want a box or image to have a fixed height.
When you want a section to fill the full height of the screen.
When you want to limit the height of a container to avoid overflow.
When you want to create a responsive layout that changes height on different screens.
When you want to align elements vertically by controlling their height.
Syntax
Tailwind
h-{size}
min-h-{size}
max-h-{size}

h-{size} sets the exact height.

min-h-{size} sets the minimum height.

max-h-{size} sets the maximum height.

Examples
Sets the height to 4rem (64px by default).
Tailwind
h-16
Sets the minimum height to the full height of the viewport.
Tailwind
min-h-screen
Limits the maximum height to 10rem (160px by default).
Tailwind
max-h-40
Sets the height to 100% of the parent element.
Tailwind
h-full
Sample Program

This example shows four boxes with different height utilities:

  • h-16 sets a fixed height.
  • min-h-screen makes the box at least as tall as the screen.
  • max-h-40 limits the height and adds scroll if content is too big.
  • h-full fills the height of its parent container (which is 100px tall here).
Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Height Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-gray-100 gap-6 p-6">
  <div class="bg-blue-500 h-16 w-32 text-white flex items-center justify-center rounded">h-16</div>
  <div class="bg-green-500 min-h-screen w-32 text-white flex items-center justify-center rounded">min-h-screen</div>
  <div class="bg-red-500 max-h-40 w-32 text-white overflow-auto rounded">
    <p class="p-2">max-h-40 with overflow scroll if content is bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w-32" style="height: 100px;">
    <div class="bg-purple-500 h-full w-full text-white flex items-center justify-center rounded">h-full inside 100px container</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind uses rem units by default, so h-16 means 4rem (16 x 0.25rem).

Use overflow-auto with max height to allow scrolling if content is too big.

Height utilities work well with Flexbox and Grid layouts for responsive design.

Summary

Height utilities let you control element height easily with simple classes.

Use h-, min-h-, and max-h- for fixed, minimum, and maximum heights.

Combine height utilities with layout classes for better design control.

Practice

(1/5)
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