CSS Spacing to Tailwind

padding: 1.5rem becomes p-6. Shorthands expand to side utilities. Off-scale lengths become p-[13px].

Shorthand gotchas

Four-value margin/padding shorthands expand to side utilities. Read the output before you assume p-4 alone is enough.

Gap vs margin

On flex and grid containers, prefer gap-* over sprinkling margins on every child. Migrations that keep both systems usually reintroduce spacing bugs within a month.

Off-scale spacing

Design tools love 13px. Tailwind’s default scale may not. Use arbitrary spacing briefly, then decide whether to extend the theme.

Try it

Open converter

.example { display: flex; gap: 1rem; padding: 1rem; }

Trust note: verify output visually. The converter is a draft helper for developers.