Height Utilities
Control height with h-* fixed values, h-full to fill parent, h-screen for viewport height, and h-auto for natural sizing.
The h-* Family of Utilities
Height utilities in Tailwind mirror the width system. The h-* prefix controls how tall an element is, with values drawn from the same spacing scale, fractional sizes, and semantic keywords you already know from w-*. Unlike widths, heights behave differently in CSS because block elements are typically as tall as their content by default — so explicit height utilities are used more selectively.
<!-- Height examples -->
<div class="flex gap-4 items-end">
<div class="w-16 h-8 bg-blue-200 rounded">h-8</div>
<div class="w-16 h-16 bg-blue-300 rounded">h-16</div>
<div class="w-16 h-32 bg-blue-400 rounded">h-32</div>
<div class="w-16 h-48 bg-blue-500 rounded">h-48</div>
</div>Fixed Heights With the Spacing Scale
Fixed heights follow the same 4px-per-unit spacing scale as widths. h-4 is 16px, h-12 is 48px, and h-96 is 384px. Common uses include button heights (h-10 or h-12), avatar sizes (h-8 w-8), and divider lines (h-px for a 1px line). Pairing h-* with w-* of the same value gives you perfect squares.
<!-- Square avatar shapes using equal h and w -->
<div class="flex gap-4">
<div class="h-10 w-10 rounded-full bg-emerald-400 flex items-center justify-center text-white text-sm">SM</div>
<div class="h-14 w-14 rounded-full bg-emerald-500 flex items-center justify-center text-white">MD</div>
<div class="h-20 w-20 rounded-full bg-emerald-600 flex items-center justify-center text-white">LG</div>
</div>All lessons in this course
- Width Utilities
- Height Utilities
- Min and Max Constraints
- Aspect Ratio