Tailwind 间距刻度

A spacing scale is a set of predefined size values used consistently across a design system for margins, padding, gaps, widths, and heights. Instead of using arbitrary pixel values like 13px or 17px, you choose from a curated set of sizes. This constraint produces visually harmonious designs because all spacing values are multiples of a base unit, creating natural alignment and rhythm throughout the UI.

Tailwind's spacing scale is based on a 4px (0.25rem) base unit. Each step number multiplies by 0.25rem: spacing-1 = 4px, spacing-2 = 8px, spacing-4 = 16px, spacing-8 = 32px, spacing-16 = 64px. The scale runs from 0 to 96 (384px), with fractional steps at 0.5 (2px), 1.5 (6px), 2.5 (10px), and 3.5 (14px) for fine-grained control at small sizes.

The 4px base unit is the de facto standard in UI design systems, adopted by Google's Material Design, Apple's HIG, and most major design tools. Designers and developers working on the same system naturally align: a designer specifying 16px maps directly to Tailwind's 4 (4 × 4px = 16px). This shared language eliminates the translation error between design files and code.

The most common use of the spacing scale is padding. p-4 adds 16px of padding on all four sides. This is the standard padding for compact UI elements like badges and small cards. For comfortable cards, p-6 (24px) works well. For spacious section containers, p-8 to p-12 gives generous breathing room.

The same spacing scale applies to many CSS properties beyond margin and padding. gap-4 adds a 16px gap between flex or grid children. w-8 sets a width of 32px. h-16 sets a height of 64px. top-4 positions an absolutely positioned element 16px from the top. The unified scale means all these values automatically align with each other visually.

When you need smaller adjustments than 4px, Tailwind's fractional steps provide precision without arbitrary values. p-0.5 (2px) is useful for tight inner padding on small tags and badges. p-1.5 (6px) fits between compact and standard padding. p-2.5 (10px) gives a slightly larger compact feel. These fractional sizes keep spacing within the design system.

A useful mental model: small interactions (icons, badges, input padding) use 1–4 (4–16px). Component-level spacing (card padding, button padding, form field gaps) uses 4–8 (16–32px). Section-level spacing (section padding, hero margins) uses 12–24 (48–96px). Page-level spacing (top-level container padding) uses 24–32+ (96–128px).

If you need a value not in the default scale, extend it in tailwind.config.js under theme.extend.spacing. Adding spacing['18'] creates a new 72px step available as p-18, m-18, w-18, etc. This keeps your additions within the design system rather than using arbitrary values scattered throughout your HTML.

For one-off spacing needs that do not warrant a config entry, use arbitrary values: p-[13px] or mt-[22px]. Arbitrary values accept any valid CSS length unit: px, rem, em, %, vw, vh. Use these sparingly for pixel-perfect edge cases — too many arbitrary values defeat the purpose of having a design system. If you use the same arbitrary value more than twice, add it to the config instead.

One of the biggest benefits of using a predefined spacing scale is team consistency. When all developers on a project use Tailwind's spacing classes, every element naturally aligns with every other element. There are no more debates about whether to use 14px or 16px — you use the scale. Code reviews become easier because any value outside the standard steps is immediately visible and questionable.

The spacing scale works seamlessly with responsive prefixes. You can apply different spacing at different breakpoints: px-4 md:px-8 lg:px-16 gives a page container padding that doubles at each major breakpoint. This scaling pattern mirrors how professional designs usually handle whitespace — mobile is compact, desktop is generous.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: Tailwind's spacing scale is based on 4px (0.25rem) increments numbered 0 to 96, fractional steps like 0.5, 1.5, and 2.5 provide fine-grained control at small sizes, and the same scale applies uniformly to padding, margin, gap, width, and height utilities. Next up we master padding utilities and all their directional variants.