Sizing: Width, Height, Min, Max

Width and Height

Width (w-*) and height (h-*) utilities pull from the same spacing scale plus a set of special keywords. The shorthand size-* sets both width and height simultaneously.

• w-full — 100% of parent width.
• w-screen — 100vw.
• w-1/2, w-1/3, w-2/3 — percentage fractions.
• w-auto — browser-computed auto.
• h-screen — 100vh; h-dvh — 100dvh (dynamic viewport).
• size-10 — sets width AND height to 2.5 rem.

Min and Max Constraints

<img
  class="w-full max-w-md min-h-[200px] object-cover rounded-xl"
  src="/hero.jpg"
  alt="Hero"
/>

Use min-w-0 on flex children to allow them to shrink below their natural size — a common fix for text overflow inside flex containers.