Width, height, and maximum size

Sizing in Tailwind comes down to a few questions. Should the box fill its parent? Should it stop at a readable width? Does it have a height reference at all?

Use w-full when a box should fill the available width. Use fractions like w-1/2 when the split is a deliberate design choice.

“Full” means 100% of the containing block, the parent’s content area. It doesn’t mean the viewport. Padding, grid tracks, flex sizing, and the parent’s own width all affect the final pixel value.

Readable maximum widths

Long lines of text are hard to read. Maximum-width utilities fix that:

<article class="mx-auto max-w-prose px-4">...</article>

Three decisions are combined here. max-w-prose caps the line length at 65ch, roughly 65 characters. mx-auto centers the box when it’s narrower than its container. px-4 keeps the text off the screen edges on a phone.

You can pair w-full with max-w-* for a control that takes all available space up to a limit. A search input with w-full max-w-md fills a narrow sidebar and stops growing in a wide main column.

Height needs a reference

h-full only works when the parent has a defined height. If the parent’s height is auto, h-full resolves to nothing useful. This confuses everyone at least once.

For a page that should fill the screen, don’t chain h-full through every ancestor. Use min-h-dvh on the outer element. The dvh unit tracks the visible viewport on mobile, where browser bars appear and disappear, so it’s more accurate than the older 100vh.

The overflow trap

Flex and grid items have an automatic minimum size equal to their content. A long filename can overflow even inside a “flexible” row. min-w-0 lets the item shrink below its content width:

<div class="flex max-w-md gap-3">
  <div class="min-w-0 flex-1">
    <p class="truncate">a-very-long-file-name-that-must-fit.txt</p>
  </div>
</div>

Without min-w-0, the filename pushes past the container. With it, truncate can do its job and cut the text with an ellipsis.

One last piece of advice. Don’t use a fixed height to make cards look equal. Content wraps, users zoom, translations get longer. Let the grid align the items, and use minimum heights when content may grow.

Try this: put a long unbroken label inside a flexible row and watch it overflow. Add min-w-0 and watch it stop. Then resize the readable article at narrow and wide widths and say which box is constraining it at each size.