Sizing

Width, height, min/max constraints and the size-* shorthand — plus when to prefer intrinsic sizing over fixed dimensions.

Sizing utilities draw from the same spacing scale as padding and margin, plus fractions, viewport units and content-based keywords.

Width#

v4.2 Logical equivalents: inline-* for inline size, block-* for block size, plus min-inline-*, max-inline-*, min-block-* and max-block-*.

Intrinsic sizing#

w-fit is the useful one: it sizes a block element to its content without making it inline.

<div class="space-y-2 p-4 text-sm">
  <div class="w-fit rounded bg-indigo-100 px-3 py-1.5 text-indigo-900">w-fit — hugs the content</div>
  <div class="w-full rounded bg-gray-100 px-3 py-1.5 text-gray-700">w-full — fills the parent</div>
  <div class="w-1/2 rounded bg-emerald-100 px-3 py-1.5 text-emerald-900">w-1/2</div>
</div>

Height#

size-*#

Sets width and height together — ideal for avatars, icons and buttons.

<img class="size-10 rounded-full" src="…" alt="">
<svg class="size-5" …></svg>

size-10 replaces h-10 w-10. It accepts the same values: size-full, size-fit, size-1/2.

Min and max#

The max-w-* scale#

These come from the --container-* theme namespace, shared with container queries.

Aspect ratio#

<div class="grid grid-cols-3 gap-3 p-4 text-xs text-white">
  <div class="grid aspect-square place-items-center rounded-lg bg-indigo-500">square</div>
  <div class="grid aspect-video place-items-center rounded-lg bg-emerald-600">video</div>
  <div class="grid aspect-3/4 place-items-center rounded-lg bg-amber-500">3/4</div>
</div>

Combine with object-cover so images fill the box without distortion:

<img class="aspect-video w-full rounded-lg object-cover" src="…" alt="">

Object fit and position#

Common patterns#

Responsive image card#

<figure class="overflow-hidden rounded-xl border border-gray-200">
  <img class="aspect-video w-full object-cover" src="…" alt="">
  <figcaption class="p-4 text-sm text-gray-600">Caption</figcaption>
</figure>

Full-height app shell#

<div class="flex min-h-dvh flex-col">
  <header class="shrink-0">…</header>
  <main class="flex-1 overflow-y-auto">…</main>
</div>

min-h-dvh rather than h-dvh lets the page grow if the content is taller.

Fixed sidebar, fluid content#

<div class="flex gap-6">
  <aside class="w-64 shrink-0">…</aside>
  <main class="min-w-0 flex-1">…</main>
</div>

Both shrink-0 and min-w-0 are load-bearing here.

Readable prose column#

<article class="mx-auto max-w-prose px-6">…</article>

Square avatar grid#

<div class="grid grid-cols-4 gap-2">
  <img class="aspect-square w-full rounded-lg object-cover" src="…" alt="">
</div>

Common mistakes#

• h-full with no parent height. Percentage heights need a resolved parent height. Use h-dvh, min-h-dvh, or a flex/grid parent.
• w-screen inside a padded container. 100vw includes the scrollbar and ignores the parent, causing horizontal overflow. w-full is almost always what you meant.
• h-screen on mobile. Use h-dvh.
• Forgetting object-cover with aspect-*. The image distorts to fill the box.
• Fixed heights on text containers. Text length varies; use min-h-* and let it grow.
• Missing min-w-0 on a flex child that should truncate. The most common truncation bug.

Related topics#

• Spacing — the shared scale
• Flexbox — basis, grow, shrink
• Container & Columns — page-level width
• Overflow & Layering — what happens when content does not fit