Should I use a 4px or 8px base?

8px base systems are more common and align with Material Design, Tailwind, and most major design systems. 4px offers finer granularity. Both are multiples of 4, so they always align on pixel boundaries.

What is the Tailwind default spacing scale?

Tailwind's default is 4px per unit (spacing-1 = 4px, spacing-2 = 8px, ..., spacing-16 = 64px). The generator can output in this format or as a custom scale.

Spacing Scale Generator

Generates a spacing scale for design systems — a set of consistent spacing values for margins, padding, and gaps. Choose a base unit (4px, 8px) and a scaling method (linear, geometric, or T-shirt sizes). Outputs as CSS custom properties (--spacing-1: 4px), Tailwind CSS extend.spacing config, or JSON design tokens.

Base unit (px)

System

Steps: 12

Unit

4px

8px

12px

16px

20px

24px

28px

32px

36px

40px

44px

48px

CSS custom properties

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
}

Configure your base unit and scale method to generate a complete spacing system for your project.