Width & Height

Size elements with fixed, fractional, viewport, and content-based utilities plus min and max constraints.

4 min read Level 2/5 #tailwind#layout#sizing

What you'll learn

Use width and height with fractions and screen units
Constrain with min and max utilities
Use the size shorthand and fit values

Sizing utilities cover fixed lengths, fractions of the parent, viewport units, and content-driven sizes — plus the constraints that keep them sane.

Widths and Heights

<div class="w-full">100% of the parent</div>
<div class="w-1/2">half the parent width</div>
<div class="w-screen">100vw</div>
<div class="h-dvh">full dynamic viewport height</div>
<div class="w-fit">just wide enough for its content</div>

Fractions (w-1/2, w-2/3, w-1/12) are resolved against the parent. h-dvh uses the dynamic viewport height, which correctly accounts for mobile browser chrome where the older h-screen would not.

The size Shorthand

When width and height are equal — avatars, icons, dots — size-* sets both at once:

<img class="size-10 rounded-full" src="/avatar.jpg" alt="" />
<span class="size-2 rounded-full bg-green-500"></span>

size-10 replaces w-10 h-10. It is the idiomatic choice for square elements.

Constraints with min and max

Fixed sizes break on real content; constraints keep layouts fluid but bounded:

<!-- Readable line length for body text -->
<article class="max-w-prose mx-auto">long article…</article>

<!-- Always fill the screen at minimum -->
<main class="min-h-screen">…</main>

<!-- Flexible image that never exceeds its column -->
<img class="w-full max-w-md" src="/photo.jpg" alt="" />

Two patterns worth memorizing: max-w-prose (or max-w-md) caps text to a readable measure, and min-w-0 on a flex child fixes the notorious “long text refuses to shrink and overflows” bug — a flex item defaults to min-width: auto, and min-w-0 lets it actually compress. v4 also accepts dynamic arbitrary values like w-[42rem] for exact one-offs.

Position →