0
0
Tailwindmarkup~5 mins

Height utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.