The earlier spacing lesson showed you p-4, m-8 and w-full. This lesson explains the scale underneath those classes, why v4 accepts numbers that are not in any list, and the sizing utilities you need for real layouts: viewport units, fractional widths, size-*, container widths and logical properties. After finishing it you will be able to choose a spacing value confidently and size any box relative to its parent, the viewport or its own content.
In v4 the whole scale is derived from a single theme variable:
@theme {
--spacing: 0.25rem; /* the default */
}Every numeric utility multiplies this value: p-4 is calc(var(--spacing) * 4) = 1rem, gap-6 is 1.5rem, w-64 is 16rem. Because it is a multiplication rather than a lookup table, any number works — mt-13, w-37, p-4.5 — and you can change the rhythm of an entire site by editing one line. Fractions like 0.5, 1.5 and 2.5 exist for fine adjustments.
| Utility | Value | Typical use |
|---|---|---|
| p-1 / gap-1 | 0.25rem (4px) | Icon padding, tight gaps |
| p-2 / gap-2 | 0.5rem (8px) | Buttons, badges |
| p-4 / gap-4 | 1rem (16px) | Cards, list items |
| p-6 / p-8 | 1.5rem / 2rem | Sections on mobile |
| py-16 / py-24 | 4rem / 6rem | Page sections on desktop |
px (w-px, h-px) is a literal one-pixel value, useful for hairline dividers.
Sizing utilities accept the numeric scale plus several keyword and relative values:
<div class="w-1/2 md:w-1/3">Fraction of the parent</div>
<div class="w-full max-w-md">Full width, capped at 28rem</div>
<div class="w-fit px-4">As wide as its content</div>
<div class="min-h-dvh">At least the dynamic viewport height</div>
<div class="h-screen">Exactly 100vh</div>Fractions are available in halves, thirds, quarters, fifths, sixths and twelfths. min-w-0 is the fix for flex children that refuse to shrink when their text is long. w-min, w-max and w-fit map to the intrinsic sizing keywords.
For viewport heights prefer dvh (h-dvh, min-h-dvh) over screen on mobile: it accounts for the browser's collapsing address bar so content never hides behind it. svh and lvh variants exist for the small and large viewport respectively.
size-* sets width and height together, which is ideal for icons, avatars and loading spinners:
<svg class="size-5">...</svg>
<img class="size-12 rounded-full" />
<div class="size-full">Fill the parent in both directions</div>Named widths such as max-w-sm through max-w-7xl come from the container scale (--container-* variables, 24rem to 80rem). They are the standard way to limit line length and centre page content: mx-auto max-w-5xl px-4. max-w-prose (65 characters) is tuned for long-form reading.
Padding, margin, inset and borders have logical variants that flip automatically in right-to-left languages:
<blockquote class="ps-4 border-s-4 border-gray-300">
<!-- ps = padding-inline-start, border-s = border-inline-start -->
</blockquote>
<button class="ms-auto">Pushed to the end of the row</button>ms/me, ps/pe, start-*/end-* and border-s/border-e replace the physical l/r forms whenever the site could be translated. Physical utilities remain available for cases like a fixed sidebar that must always sit on the left.
gap-* on flex and grid containers instead of margins on children; it avoids the "extra margin on the last item" problem entirely.space-x-* and space-y-* still exist for simple stacks, but gap is more predictable when items wrap.max-w-* on the container and w-full on children rather than fixed widths; layouts then adapt without breakpoints.-mt-4, -mx-4) are legitimate for pulling elements over padding, for example a full-bleed image inside a padded card.With the default theme, what is the computed value of `w-20`?
--spacing (0.25rem) multiplied by the number, so any value like p-13 is valid in v4.full, screen, fit, min, max and the container scale (max-w-md … max-w-7xl).dvh units for mobile-safe full-height sections and size-* for square elements.ps, me, start, border-s) make layouts work in RTL languages.gap-* before margins and for max-w-* before fixed widths.Next lesson: Typography and Fonts — set font families, sizes, weights and line heights.