TopolearnSpacing and sizing utilities are the classes you'll type most.
Tailwind v4 derives every spacing utility from one variable, --spacing, which is 0.25rem (4px) by default. A number is a multiple of it: p-4 is calc(var(--spacing) * 4), 1rem. Any integer works, so p-13 or mt-17 are valid without configuration.
Padding and margin: p-4 (all sides), px-4/py-2 (horizontal/vertical), pt-2, pr-3, pb-4, pl-5, and logical ps-4/pe-4 (start/end, for right-to-left support). Margins mirror them with m-, plus mx-auto for centering and negative margins like -mt-2.
Gaps: gap-4, gap-x-2, gap-y-6 in flex and grid. Prefer gap over margins between siblings. (space-y-4 adds margins between children if you're not in flex or grid.)
Width and height:
- scale values:
w-64,h-10, - fractions:
w-1/2,w-2/3, - keywords:
w-full(100%),w-screen(100vw),h-dvh,w-fit,w-min,w-max, - both at once:
size-10sets width and height.
Constraints: max-w-prose (65ch), max-w-md and friends from the container scale (max-w-md is 28rem), min-h-dvh, min-w-0.
p-px gives 1px and p-0.5 half a step. For values off the scale, the arbitrary syntax w-[37px] exists (covered later), but reach for the scale first; it's what keeps a design consistent.
Example
<main class="mx-auto min-h-dvh max-w-3xl px-4 py-8 sm:px-6">
<section class="flex flex-col gap-6">
<div class="rounded-lg p-6"> <!-- padding: 1.5rem -->
<img class="size-16 rounded-full" src="/a.jpg" alt="Avatar"> <!-- 4rem x 4rem -->
</div>
<div class="flex gap-4">
<aside class="w-1/3 shrink-0">Sidebar</aside> <!-- width: 33.333% -->
<article class="min-w-0 flex-1">Content</article>
</div>
<p class="max-w-prose">Readable line length.</p>
<div class="mt-13 h-px w-full bg-gray-200"></div> <!-- any integer works -->
</section>
</main>Remember
- Numbers are multiples of --spacing (0.25rem): p-4 = 1rem
- Any integer works without config: p-13
- size-* sets width and height together
- Prefer gap over margins between siblings
Watch out for
- Using space-y-* on a flex or grid container where gap-* is simpler and more robust.