Tailwind CSS Academy · Lesson

The Tailwind Spacing Scale

Understand Tailwind's default spacing scale (0, 0.5, 1, 2, ... 96) and how it maps to rem values for predictable spacing.

What Is a Spacing Scale?

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 Default Scale

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.

/* Tailwind spacing reference:
   0   = 0px
   0.5 = 2px
   1   = 4px
   2   = 8px
   3   = 12px
   4   = 16px
   6   = 24px
   8   = 32px
   12  = 48px
   16  = 64px
   24  = 96px
   32  = 128px
   48  = 192px
   64  = 256px
*/

All lessons in this course

← Back to Tailwind CSS Academy