Web development
The Tailwind spacing scale
Tailwind derives every spacing value from one variable: --spacing is 0.25rem. Here is how the scale works and where arbitrary values break it.
Key points
- Every spacing utility multiplies the --spacing variable, which is 0.25rem.
- gap-* handles space between elements; space-y-* adds margins to the children.
- Arbitrary values such as p-[13px] leave the scale and break alignment between sections.
The Tailwind spacing scale comes from one variable, --spacing: 0.25rem: every utility such as p-4 or gap-6 multiplies that value by the number in its name.
Where the number comes from
A quarter of a rem is the base: p-1 is 0.25rem, p-4 is 1rem, p-6 is 1.5rem. The generated CSS holds no pixels, so spacing follows the root font size and the reader's zoom.
@import "tailwindcss";
@theme {
--spacing: 0.25rem;
}| Class | Calculation | Value at 16 px root |
|---|---|---|
| p-1 | 1 × 0.25rem | 4 px |
| p-4 | 4 × 0.25rem | 16 px |
| p-6 | 6 × 0.25rem | 24 px |
| gap-8 | 8 × 0.25rem | 32 px |
The table holds with a 16 px root. If the reader enlarges the text, spacing grows with it, because the calculation stays in rem: that is why the scale handles zoom better than a hand-written set of pixel values.
gap before space-y
For space between sibling elements the right class is gap-* on a flex or grid container: it belongs to the container, not the children. space-y-* adds margins to the children and stacks on a margin that already exists; in the measured blocks it appears 2 times against 310 for gap-*.
- One scale makes two sections written by different people comparable.
- Intermediate steps exist, such as
p-5, but the 2, 4, 6, 8 sequence covers nearly every case. - Negative margins such as
-mt-4use the same scale, so they add no off-grid pixels. - Source: the tailwindcss.com documentation and the MIT licence in the repository, read on 1 November 2026.
When the scale is not enough
An arbitrary value such as p-[13px] compiles, but leaves the system: it does not follow zoom like rem values and is no longer comparable with other sections. That is the limit: the scale describes the rhythm of the layout, not typography or the inner proportions of a component, which belong in their own tokens.
Where to continue
In the EneUI catalogue read form-layout-01, bento-grids-06 and bento-grid, three layouts where spacing does the work. For tokens read building a design system from tokens, for layout flexbox and grid for designers, and for the comparison Tailwind against CSS modules. The other two pieces in the series are fluid typography with clamp and animations without JavaScript.
Frequently asked questions
How many pixels is p-4?
It is 1rem, so 16 px with a 16 px root. The CSS keeps the value in rem, so it grows when the reader enlarges the text.
Can I change the spacing scale?
Yes. The --spacing variable in the @theme block rescales every utility: at 0.3rem, p-4 becomes 1.2rem. Do it before writing pages, not after.
gap-* or space-y-*?
Prefer gap-* when the container is flex or grid, because the space belongs to the container. space-y-* stays handy in simple vertical flows with margins you already control.
Does Tailwind include half steps such as p-0.5?
Yes. The scale accepts decimals such as 0.5 and 1.5, worth 0.125rem and 0.375rem. They suit icons and badges, less so page sections.
Why avoid arbitrary values?
They leave the scale and break the comparison between sections. They stay legitimate for a single case, for example a height measured from an image.