Custom Spacing Scale in Tailwind Config
Extend or customize the Tailwind CSS spacing scale with project-specific values for margin, padding, gap, width, and height utilities.
Spacing
Detailed Explanation
Custom Spacing in Tailwind
The spacing scale in Tailwind controls margin (m-*), padding (p-*), gap (gap-*), width (w-*), and height (h-*) utilities. The default scale goes from 0 to 96 in incremental steps.
Extending the Scale
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
"128": "32rem",
"144": "36rem",
"160": "40rem",
"4.5": "1.125rem",
"13": "3.25rem",
},
},
},
};
Now you can use p-128, w-144, mt-4.5, etc.
Using Custom Units
Spacing values are not limited to rem. You can use any CSS unit:
spacing: {
"screen-1/2": "50vh",
"full-minus-header": "calc(100vh - 64px)",
"sidebar": "280px",
}
Named Spacing Tokens
For design systems, named tokens improve readability:
spacing: {
"xs": "0.25rem", // 4px
"sm": "0.5rem", // 8px
"md": "1rem", // 16px
"lg": "1.5rem", // 24px
"xl": "2rem", // 32px
"2xl": "3rem", // 48px
}
Extend vs Override
Extending adds your values alongside defaults. Overriding means only your values exist, which removes all default spacing classes.
Use Case
Use custom spacing when your design system has specific spacing tokens that differ from Tailwind's default 4px-based scale.