Spacing

One base unit, --spacing, and every padding, margin, gap and size utility as a multiple of it.

Every spacing utility is a multiple of one base unit, --spacing. A utility n is n × 0.25rem: p-4 is 1rem, gap-2 is 0.5rem.

Note

Inherited from Tailwind v4 defaults, not yet a pmndrs decision. See Tailwind's padding docs.

Base unit

Token	Value
`--spacing`	`0.25rem`

The same scale drives padding (p-*), margin (m-*), gaps (gap-*, space-*), sizes (w-*, h-*, size-*, min-*, max-*), offsets (inset-*, top-*…) and translations (translate-*). Any multiple works, not only the steps below: p-13 is 3.25rem. Prefix a utility with - for a negative value (-mt-2), and use brackets for a one-off (p-[5px]).

Scale

The common steps, with the value your project gets. Pixels assume the browser's default 16px root. The bars are live w-* utilities, rendered with this site's CSS: its root is 17px, so they draw slightly wider than in your project. The table is the source of truth.

Utility	Value	Pixels
`0`	`0`	0
`px`	`1px`	1px
`0.5`	`0.125rem`	2px
`1`	`0.25rem`	4px
`1.5`	`0.375rem`	6px
`2`	`0.5rem`	8px
`2.5`	`0.625rem`	10px
`3`	`0.75rem`	12px
`3.5`	`0.875rem`	14px
`4`	`1rem`	16px
`5`	`1.25rem`	20px
`6`	`1.5rem`	24px
`7`	`1.75rem`	28px
`8`	`2rem`	32px
`9`	`2.25rem`	36px
`10`	`2.5rem`	40px
`11`	`2.75rem`	44px
`12`	`3rem`	48px
`14`	`3.5rem`	56px
`16`	`4rem`	64px
`20`	`5rem`	80px
`24`	`6rem`	96px
`28`	`7rem`	112px
`32`	`8rem`	128px
`36`	`9rem`	144px
`40`	`10rem`	160px
`44`	`11rem`	176px
`48`	`12rem`	192px
`52`	`13rem`	208px
`56`	`14rem`	224px
`60`	`15rem`	240px
`64`	`16rem`	256px
`72`	`18rem`	288px
`80`	`20rem`	320px
`96`	`24rem`	384px

Edit this page

Summary

Base unit

Scale