Width, Height and the Box Model

Layout begins with size. This chapter of the Tailwind CSS for Beginners series covers the utilities that set width and height, the sizing helpers that appear constantly in real interfaces, and the box-model behaviour that Tailwind's reset establishes before you write a single class. Everything here maps directly onto the CSS from The Box Model, so if content-box versus border-box is fuzzy, that chapter is the fix.

Setting width

Width utilities come in four useful flavours: fixed steps, percentages, viewport-based sizes and the fluid max-w- containers that keep text readable:

The max-w- scale deserves special attention. Text that runs the full width of a 27-inch monitor is unreadable, so real layouts set a generous outer width and then cap the inner column: max-w-6xl mx-auto for a page shell, max-w-prose for an article. Tailwind also generates a container class for each named size — w-container-md style tokens exist as theme variables — but most teams standardise on two or three max-w- steps.

Setting height and aspect ratio

Height is used far less often, because content normally decides it. Reach for height utilities for fixed-format pieces such as toolbars, heroes and thumbnails:

<div class="h-16 flex items-center justify-between px-4 bg-slate-900 text-white">Toolbar</div>
<div class="h-64 mt-4 bg-sky-100 flex items-center justify-center">Fixed-height banner</div>
<div class="mt-4 aspect-video bg-slate-200 flex items-center justify-center">16:9 media box</div>

Expected output:

A slim dark toolbar with its label on the left, a pale blue banner of
fixed height beneath it, and finally a box that keeps a 16:9 ratio
regardless of how wide the window becomes.

Prefer min-h-screen over h-screen for full-page sections: it lets the area grow when content is longer than the viewport, instead of clipping it. The aspect-video and aspect-square helpers replace the aspect-ratio property, which means media placeholders hold their shape while loading.

The box model, already decided for you

Tailwind's Preflight reset applies box-sizing: border-box to every element, the opposite of the browser default. With border-box, the width you ask for is the width you get: padding and border are counted inside it rather than added on top. That is why w-64 p-4 still measures 16rem across, and why the arithmetic that trips up beginners in plain CSS rarely bites here.

You can still opt out per element if you ever need the classic behaviour, and the utilities say so plainly:

• box-border — width excludes padding and border (the default in Tailwind).
• box-content — width means content only; the element grows to fit its padding.
• border — adds a 1px border on all sides; remember that in v4 its colour defaults to currentColor until you set one.
• divide-x and divide-y — hairline separators between children without touching each child's margins.

A card with real dimensions

Putting the pieces together, here is a media card whose image area keeps a fixed ratio while the text below takes the natural height it needs:

<article class="w-full max-w-sm overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
  <div class="aspect-video bg-gradient-to-br from-indigo-400 to-sky-400"></div>
  <div class="p-5">
    <h3 class="text-lg font-bold text-slate-900">Sizing fundamentals</h3>
    <p class="mt-1 text-sm text-slate-600">Width, height, ratio and the box model in one card.</p>
  </div>
</article>

Expected output:

A card no wider than 384px, centred wherever its parent puts it, with
a 16:9 blue-to-indigo panel on top and a white text area below. The
card's height is the sum of the image and the text; nothing is
clipped and no scrollbar appears.

Notice that w-full lets the card shrink inside a narrow parent while max-w-sm caps it on wide screens — a combination you will reuse constantly.

Overflow, clipping and scrolling

When content outgrows its box, overflow- utilities decide what happens: overflow-hidden clips it (essential alongside rounded corners, because images otherwise bleed past the radius), overflow-auto or overflow-y-auto adds scrollbars only when needed, and overflow-x-hidden stops a stray transform from producing horizontal page scroll. Pair them with truncate when the right answer is cutting text rather than scrolling.

Common mistakes

• Setting a height on text containers — translated or larger text overflows; let content decide, or use min-h-.
• Forgetting min-w-0 — a flex child with long content refuses to shrink below its intrinsic width until you set it.
• Combining w-full with fixed padding on a content-box element — in Tailwind this is safe because of border-box, but copying plain CSS assumptions from old articles is not.
• Missing overflow-hidden under rounded-xl — images poke out of the corners and the effect looks broken.
• Sizing with magic pixel values — w-[347px] rarely survives a redesigned sidebar; prefer scale steps and max-w-.

Practice checklist

1. Build a page shell with max-w-6xl mx-auto px-6 and check it on a narrow window.
2. Add an aspect-video hero and confirm the ratio holds while you resize.
3. Deliberately remove min-w-0 from a shrinking flex child and watch it overflow.
4. Inspect a card with w-64 p-4 and verify in dev tools that the total width stays 16rem.
5. Give an image rounded-xl without overflow-hidden, then add it and compare.

Sizing gives boxes their measurements; the next chapter arranges them — Flexbox with Tailwind.