Spacing and Sizing
Width and Height
Width (w-*) and height (h-*) utilities size elements using the spacing scale, fractions, percentages and viewport units.
Ways to set a size
| Class | Meaning |
|---|---|
| w-16 | 4rem (64px) — from the scale |
| w-1/2 | 50% of the parent |
| w-full | 100% of the parent |
| w-screen | 100% of the viewport width |
| h-screen | 100% of the viewport height |
| max-w-md | Cap the width at a readable size |
Example
<div class="flex gap-2">
<div class="w-1/3 bg-sky-500 text-white p-4 rounded text-center">1/3</div>
<div class="w-2/3 bg-sky-700 text-white p-4 rounded text-center">2/3</div>
</div>Constrain with max-width
w-full lets an element fill its parent, while max-w-* stops it getting too wide on large screens — ideal for readable text columns and cards.
Example
<div class="w-full max-w-sm mx-auto bg-white p-6 rounded-xl shadow">
<p>Full width on mobile, capped at max-w-sm on desktop.</p>
</div>ℹ️
Common max-width steps: max-w-sm, max-w-md, max-w-lg, max-w-xl … up to max-w-7xl. Use them for content wrappers.