Tailwind CSS v4 derives many numeric spacing utilities from one theme variable. The arithmetic is simple, but custom themes and different utility families make context important.
The Tailwind v4 spacing model
Numeric utilities such as p-6, mt-8, and gap-4 are generated from the --spacing theme variable. With the framework's 0.25rem value, multiply the numeric suffix by 0.25rem.
This means spacing 4 is 1rem, spacing 6 is 1.5rem, and spacing 8 is 2rem. At a 16px root those values correspond to 16px, 24px, and 32px, but the rem result remains tied to the actual root context.
@import "tailwindcss";
@theme {
--spacing: 0.25rem;
}
/* p-6 => padding: calc(var(--spacing) * 6) */Custom themes change the entire lookup
A project can redefine --spacing. If it becomes 0.2rem, spacing 6 is 1.2rem rather than 1.5rem. Always inspect the theme source before copying a table from another project or an older Tailwind version.
Arbitrary values such as p-[18px], keyword values such as m-auto, fractions, and other theme namespaces do not necessarily use the numeric spacing formula.
- Confirm the installed Tailwind major version.
- Read the project's @theme declaration.
- Distinguish numeric spacing from arbitrary and keyword values.
- Use the browser's computed styles for final verification.
Map design tokens to intent
Do not choose a Tailwind class only because its pixel equivalent looks close. Decide whether the space belongs to a shared scale, a component exception, or a responsive relationship.
Document the chosen utility beside the corresponding design token. Consistent use of gap, padding, and margin utilities creates more value than reproducing every one-off measurement exactly.
The AyeCalc converter exposes --spacing and root font size as inputs so the result can match the project instead of a hard-coded table.
Negative values and generated CSS
Negative margin utilities use the same magnitude and apply its negative. Padding and gap cannot meaningfully use negative lengths in the same way, so utility availability depends on the property.
When auditing a layout, work from the computed CSS declaration. This shows whether a utility was generated, overridden by a variant, or changed by the project's theme configuration.
Sources and further reading
These references define the technical behavior described in this guide. Project-specific computed values should still be verified in the rendered application.
Last reviewed: August 17, 2026