Height utilities in Tailwind - Browser Rendering Trace

Render Flow - Height utilities

Read HTML element

↓

Apply Tailwind height class

↓

Parse height value

↓

Set CSS height property

↓

Recalculate layout

↓

Paint element with new height

↓

Composite final frame

The browser reads the HTML element, applies the Tailwind height class which sets the CSS height property, recalculates layout to fit the new height, paints the element, and composites the final visual frame.

Render Steps - 3 Steps

Code Added:<div class="bg-blue-500 text-white">Fixed Height Box</div>

Before

[ ]
(empty space)

→

After

[ Fixed Height Box ]
(background default height, text visible, no fixed height)

The div appears with default height based on content and background color applied.

🔧 Browser Action:Creates DOM node, applies background and text color styles, paints text

Code Sample

A blue box with white text that has a fixed height of 6rem, centered text vertically and horizontally using flexbox.

Tailwind

<div class="h-24 bg-blue-500 text-white flex items-center justify-center">
  Fixed Height Box
</div>

Tailwind

/* Tailwind generated CSS for h-24 */
.h-24 {
  height: 6rem;
}

.bg-blue-500 {
  background-color: #3b82f6;
}

.text-white {
  color: #ffffff;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

Render Quiz - 3 Questions

After applying step 2 (h-24), what happens to the box height?

A The box height becomes fixed at 6rem regardless of content

B The box height shrinks to zero

C The box height grows with content size

D The box height fills the entire viewport

Common Confusions - 3 Topics

Why doesn't my element grow taller when I add content inside if I use a fixed height like h-24?

Because h-24 sets a fixed height of 6rem, the element won't grow taller even if content overflows. Content may overflow or be clipped.

💡 Fixed height limits vertical size; use h-auto to grow with content.

Why does h-full not make my element taller sometimes?

h-full sets height to 100% of the parent, but if the parent has no set height, the element can't grow. The parent must have a defined height.

💡 For h-full to work, parent must have fixed or relative height.

Why is my element taller than expected when using h-screen?

h-screen sets height to 100vh (viewport height). If you have padding or margins outside, it can cause scrolling or extra space.

💡 h-screen fills viewport height exactly; watch for extra spacing outside.

Property Reference

Property	Value Applied	Visual Effect	Common Use
h-0	height: 0px	Element height collapses to zero, invisible height	Hide elements or collapse space
h-auto	height: auto	Height adjusts to content size	Default height behavior
h-full	height: 100%	Element fills height of parent container	Fill container height
h-screen	height: 100vh	Element fills full viewport height	Full page sections
h-24	height: 6rem	Fixed height of 6rem (96px)	Consistent box height
h-[50px]	height: 50px	Custom fixed height using arbitrary value	Precise height control

Concept Snapshot

Height utilities set the vertical size of elements. Common classes: h-0 (0 height), h-auto (content height), h-full (parent height), h-screen (viewport height), h-24 (fixed 6rem). Fixed heights limit growth; auto grows with content. Flexbox can center content inside fixed height boxes. Parent height affects percentage heights like h-full.