Spacing and sizing classes share one numeric scale. A number after the prefix is multiplied by the --spacing theme variable (0.25rem by default), so p-4, mt-4, w-4 and gap-4 all mean 1rem, and since v4.0 any value works, such as w-17 or pr-29, without configuration. Change --spacing in @theme (Theme Variables) and every padding, margin, width and gap in the project scales together. Sizing covers the underlying sizing properties and Margin, Border and Padding the box model sides and their logical equivalents.
| Utility | CSS |
|---|---|
| p-4, px-4, py-4 | padding, padding-inline, padding-block: 1rem |
| pt-2, pr-2, pb-2, pl-2 | Physical sides: 0.5rem |
| ps-2, pe-2, pbs-2, pbe-2 | padding-inline-start / -end, padding-block-start / -end |
| m-4, mx-auto, my-2, -mt-2 | margin: 1rem, margin-inline: auto, margin-block, negative top |
| ms-2, me-2, mbs-2, mbe-2 | Logical margins |
| space-x-4, space-y-4 | Margin between children (& > :not(:last-child)) |
| p-px, m-[3px], p-(--gutter) | 1px, an arbitrary value, a custom property |
| Utility | CSS |
|---|---|
| w-64, h-12, size-10 | width: 16rem, height: 3rem, both 2.5rem |
| w-1/2, w-full, h-full | calc(1/2 * 100%), 100% |
| w-screen, h-screen, h-dvh, min-h-svh | 100vw, 100vh, 100dvh, 100svh |
| w-min, w-max, w-fit | min-content, max-content, fit-content |
| w-xs, max-w-2xl, max-w-7xl | Container scale: 20rem, 42rem, 80rem |
| max-w-none, min-w-0, h-lh | none, 0, 1lh (one line height) |
| inline-full, block-12, max-inline-md | inline-size, block-size, max-inline-size |
| container | width: 100% plus a max-width per breakpoint |
Physical and logical classes coexist: pl-4 always pads the left edge, while ps-4 pads the start edge, which becomes the right edge under dir="rtl" (Direction and Writing Modes). Prefer the logical classes in anything that may be translated into Arabic or Hebrew.
Two habits save debugging time. First, use gap-* on flex and grid parents instead of space-x-*: the space utilities add margins to children, so they break when children wrap, are hidden, or are reordered. Second, add min-w-0 to a flex child that contains long text or a scrolling table, because a flex item's automatic minimum width is its content width and it will otherwise overflow its container. Negative margins (-mt-8) remain useful for overlapping a card onto a hero image, but check that no ancestor has overflow-hidden that would clip the overlap.