Custom Spacing Values

Tailwind's default spacing scale covers values from 0 to 96 (0 to 24rem in 0.25rem increments for small values, then larger steps). This scale is used consistently across margin, padding, width, height, gap, and positioning utilities. The values are designed to cover the vast majority of UI spacing needs, but real-world designs sometimes require values that fall between or beyond the defaults.

Design systems often require spacing values outside the default scale — a 128 value (32rem) for full-page hero sections, a 4.5 value (18px) for a specific element that sits between the standard 4 (16px) and 5 (20px), or a 13 value for a specific grid column width. Rather than using arbitrary values with bracket notation every time, add these values once to the config and give them a clean utility class name.