Component Spacing Calculator
Generate a consistent spacing system from a 4 px or 8 px base. The tool follows the Tailwind-style multiplier scale (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 32…) so the names map cleanly to Tailwind utilities. Each step is shown as a visual swatch and can be copied as CSS variables or a Tailwind config snippet.
How to use
- 1
Pick a base unit
Choose 4 px (Tailwind default, finer-grained) or 8 px (Material / iOS, fewer steps but bigger jumps).
- 2
Set the number of steps
Use the slider to grow or shrink the scale. Names follow the Tailwind multiplier set: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8…
- 3
Read the swatches
Each step shows its name, a visual width swatch (capped at 320 px for readability) and the px value.
- 4
Copy in your format
Switch tabs to copy the scale as CSS custom properties or a Tailwind config snippet.
Common use cases
- Set up a consistent 4 px or 8 px spacing system for a design system.
- Document spacing tokens for engineers in CSS or Tailwind form.
- Migrate a Figma spacing scale to a Tailwind theme extension.
- Audit an existing spacing scale for redundant or off-system values.
Limitations
- The multiplier set follows Tailwind’s standard spacing scale — custom multipliers aren’t supported.
- Swatch widths are capped at 320 px so very large steps still fit on screen; the actual token values are not capped.
- The tool generates spacing tokens only; layout primitives like gaps, paddings and margins are up to your design system.