Tailwind Spacing Scale Generator
Generate a custom Tailwind spacing scale for margin, padding, gap, and layout rhythm.
Choose a base unit, pick a scale pattern, and copy ready-to-use config output.
Build a spacing scale that fits your design system
Tailwind ships with a solid default scale, but many teams need to tune it to match their own token system, product rhythm, or legacy spacing values. This generator helps you explore those tradeoffs before you edit `tailwind.config.js`.
You can compare linear and Fibonacci-style progressions, preview the values, and export the result as Tailwind config or CSS variables for a broader design system workflow.
Create a spacing token scale
Generate a clean set of Tailwind spacing values for margins, padding, gap, inset, and layout rhythm.
Match an existing design system
Adjust the base unit and scale type until the generated values line up with your product or Figma tokens.
Ship copy-ready config fast
Export the scale as `tailwind.config.js` values or CSS custom properties without formatting it by hand.
Spacing Preview
// tailwind.config.js
module.exports = {
theme: {
spacing: {
'0': '0',
'px': '0.0625rem',
'0.5': '0.125rem',
'1': '0.25rem',
'1.5': '0.375rem',
'2': '0.5rem',
'2.5': '0.625rem',
'3': '0.75rem',
'3.5': '0.875rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
'11': '2.75rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'28': '7rem',
'32': '8rem',
'36': '9rem',
'40': '10rem',
'44': '11rem',
'48': '12rem',
'52': '13rem',
'56': '14rem',
'60': '15rem',
'64': '16rem',
'72': '18rem',
'80': '20rem',
'96': '24rem',
}
}
}:root {
--spacing-0: 0;
--spacing-0-5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2-5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3-5: 0.875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
}How Spacing Scales Work
Linear Scale
Standard Tailwind approach. Multipliers increase linearly (1, 2, 3, 4...) with some jumps at larger values. Best for general-purpose projects.
Fibonacci Scale
Uses Fibonacci-like progression (1, 2, 3, 5, 8, 13...). Creates more harmonious proportions, often used in design systems.
Base Unit
The default is 4px (0.25rem). All spacing values are multiples of this unit, ensuring consistent vertical rhythm.
Tailwind Spacing FAQ
Should I use `px` or `rem` in my Tailwind spacing scale?
Use `rem` when you want spacing to stay aligned with root font-size changes and accessibility settings. Use `px` when you need rigid pixel matching to an established design token system.
When is a Fibonacci spacing scale useful?
A Fibonacci-style scale can help when you want bigger jumps between larger sizes while keeping small values compact. For general-purpose app UI, a linear scale is usually the safer default.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow