Published 2026-03-08 · 1 min read
Tailwind Sizing Best Practices (Spacing, Typography, Tokens)
Translate design tokens into Tailwind-friendly thinking: spacing keys, arbitrary values vs scale, REM alignment, and when to bail out to CSS variables.
Spacing scale intuition
Tailwind’s spacing scale is dense at the low end for a reason: most UI rhythm lives between 4px and 32px. Memorize a few anchors (4, 8, 12, 16, 24) and convert unfamiliar pixel specs with the spacing helper.
Arbitrary vs scale
Arbitrary values (p-[13px]) help you ship, but they scatter one-off magic numbers. Promote repeated pairs into components or tokens.
Design systems and CSS variables
Expose --space-* or --font-size-* variables and let Tailwind read them via arbitrary properties when needed. That keeps marketing pages and product surfaces aligned.
Pair this article with Why developers prefer REM units for the underlying CSS reasoning.
Frequently asked questions
- Is Tailwind’s default scale always px-based mentally?
- Utility values compile to real CSS units; many teams layer REM at the config level. Map figma px to keys with the [Tailwind spacing converter](/tools/tailwind-spacing-converter).