Spacing and Sizing

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Every spacing and sizing utility in Tailwind v4 is derived from one theme variable, --spacing, so p-4, mt-8, gap-2, and w-64 all move on the same rhythm. This page covers the padding, margin, and space-between utilities and the width / height family. For the CSS box model itself see The Box Model.

Padding

padding utilities: p- (all sides), px- / py- (axes), the logical ps- / pe- (inline start / end), and the physical pt- / pr- / pb- / pl-*. Values take the numeric scale (p-0, p-0.5, p-4, p-96), p-px, or an arbitrary p-[5px].

<button class="px-4 py-2 rounded bg-blue-600 text-white">Save</button>
<article class="p-6 md:p-8">
  <p class="ps-4 border-s-2 border-slate-300">a quote, indented on the inline-start side</p>
</article>

Margin

margin mirrors padding: m-, mx- / my-, ms- / me-, mt- / mr- / mb- / ml-*. Two extras: negative margins with a leading dash (-mt-4, -mx-2, -ms-8), and auto (mx-auto to centre a block, ms-auto to push one flex item to the end).

<div class="mx-auto max-w-3xl">centred column</div>

<section class="relative">
  <img class="-mt-12 mx-auto rounded-full ring-4 ring-white" src="/avatar.jpg" alt="">
</section>

<nav class="flex gap-4">
  <a href="/">Home</a>
  <a href="/login" class="ms-auto">Log in</a>
</nav>

Space between

space-x- and space-y- add margin between a container’s children without a trailing gap. In Tailwind v4 the generated selector changed to & > :not(:last-child) (v3 used & > :not([hidden]) ~ :not([hidden])) — simpler and faster, but note it applies a margin to every child except the last, so it can fight with flex-row-reverse; prefer gap-* on a flex or grid container when you can.

<div class="space-y-4">
  <p>first</p>
  <p>second</p>
  <p>third</p>   <!-- no margin below this one -->
</div>

<div class="flex space-x-2">
  <span>a</span><span>b</span><span>c</span>
</div>

The spacing scale

--spacing is a single multiplier — 0.25rem by default — and every numbered spacing/sizing utility is calc(var(--spacing) * <n>). So p-4 is calc(0.25rem * 4) = 1rem, and the entire scale (including values you never explicitly configured, like mt-73) exists dynamically. Redefine the rhythm in one line:

@import "tailwindcss";

@theme {
  --spacing: 0.2rem;   /* tighten every p-*, m-*, gap-*, w-*, h-* at once */
}

Escape hatches: an arbitrary value p-[5px] / mt-[3vh], a fraction for sizing w-1/2, w-2/3, h-1/3 (resolved as a percentage), and the --spacing() function to reuse the scale inside your own CSS:

@layer components {
  .card {
    padding: --spacing(6);
    margin-block: --spacing(4);
  }
}

See the padding docs for the full numeric scale.

Sizing

width and height give w- / h- on the spacing scale, plus size-* which sets both at once (size-10 = w-10 h-10, ideal for icons and avatars). Keyword values: w-full (100%), w-screen / h-screen (viewport), the dynamic-viewport w-dvw / h-dvh (and w-lvw / w-svw / h-lvh / h-svh), w-min / w-max / w-fit (intrinsic sizing), and w-auto. Fractions (w-1/2, w-5/6) and arbitrary values (w-[38rem], h-[calc(100%-4rem)]) work too.

<img class="size-16 rounded-full" src="/avatar.jpg" alt="">

<div class="h-dvh overflow-y-auto">full dynamic-viewport-height scroller</div>

<button class="w-full sm:w-fit">block on mobile, hug content from sm up</button>

Constraints use min-w-, max-w-, min-h-, and max-h- — for example min-h-dvh, max-h-96, min-w-0 (a common fix for flex children that refuse to shrink). max-width also has max-w-none, the readable-measure max-w-prose, and the --container- scale: max-w-3xs … max-w-7xl are driven by the --container- theme namespace, so basis-md, max-w-md, and max-w-(--container-md) all resolve to the same width. There are no max-w-screen-* utilities in v4 — to cap width at a breakpoint, add your own token (@theme \{ --width-screen-sm: var(--breakpoint-sm); }) or use a responsive max-w-sm md:max-w-lg.

<article class="mx-auto max-w-prose">long-form text at a comfortable line length</article>

<div class="min-w-0 flex-1 truncate">text that can actually be truncated inside a flex row</div>

@import "tailwindcss";

@theme {
  --container-md: 30rem;   /* widen max-w-md, basis-md, and friends together */
}