Spacing

A 4px-based spacing scale that padding, margin, and gap all reach for. Same values as Tailwind's default so everything you already know still works.

Scale

Built on a 4px base unit. Whole steps are multiples of 4px; 0.5 and 1.5 are half-steps for tight inline details.

p-0.5

0.125rem2px

p-1

0.25rem4px

p-1.5

0.375rem6px

p-2

0.5rem8px

p-3

0.75rem12px

p-4

1rem16px

p-5

1.25rem20px

p-6

1.5rem24px

p-8

2rem32px

p-10

2.5rem40px

p-12

3rem48px

p-16

4rem64px

p-20

5rem80px

p-24

6rem96px

Layout rules

Defaults for the standard layout patterns across every page.

Pattern	Value	Notes
Page horizontal padding	px-6 md:px-10	Wraps the docs content column.
Section vertical rhythm	mt-10	Standard gap between H2 sections.
Card grid gap	gap-3 (compact) · gap-4 (default)	Between sibling cards.
Content max-width	max-w-3xl	Comfortable reading measure for docs.
Stack spacing	space-y-3	Vertical spacing inside a card body.

Custom scale

Override the spacing scale in your @theme block if you need a tighter or looser rhythm.

app/globals.css

css

@theme {
  /* Tailwind v4 derives the whole scale from one base unit.
     p-4 resolves to calc(var(--spacing) * 4) = 1rem. */
  --spacing: 0.25rem;
}

Tip

Every p-*, m-*, and gap-* utility is computed from this single variable, so changing it rescales the entire system at once. Drop it to 0.2rem for a denser UI, or raise it for a roomier one.

Scale

Layout rules

Custom scale

Also see