Pick from a scale

Choose from a shared scale instead of inventing values.

Adam Wathan@adamwathan
A nice side effect of utility-focused CSS: Choosing between pad-xs and pad-sm is much easier than 0.25em vs 0.275em 0.3em vs 0.325em vs...
Feb 16, 2016View on X ↗
Adam Wathan@adamwathan
Sometimes I find the type scale in Tailwind too limiting (especially when using multiple different fonts in the same project), wondering if we should just support using the spacing scale directly for font size? 🤔
Dec 2, 2025View on X ↗
Adam Wathan@adamwathan
@k_grajeda You could fork the framework, that's the best I got 😄 Made the conscious decision to make stuff like this not super customizable so that knowing Tailwind on one project means you know it on all projects.
Nov 28, 2025View on X ↗

Demo values are invented; the distinct count is computed from the cards on screen.

1 · Six cards, six paddings

Step each card's padding, or nudge them all.

Free numberBad
Five-step scaleGood
:root {
  --pad-xs: 0.25em;
  --pad-sm: 0.5em;
  --pad-md: 0.75em;
  --pad-lg: 1em;
  --pad-xl: 1.5em;
}
.card { padding: var(--pad-sm); }

Why it matters, pros and cons

Why it matters

With free values, every author picks a slightly different number. A scale turns each choice into a pick.

Pros

  • Choosing between two named steps is faster than tuning a decimal.
  • Spacing stays even across the page, so the layout feels consistent.
  • Everyone on the team, and every project, shares the same steps.

Cons

  • A fixed scale can feel too limiting when a design needs an in-between value.
  • Five steps must cover every case, so someone has to design the scale well.
  • Forking or extending the scale costs the familiarity it was meant to protect.