Why make spacing fluid
Generous whitespace makes a desktop layout feel calm, but the same 96px section padding wastes a third of a phone screen. Fixed breakpoints fix that in steps, often leaving tablets with spacing that is either too tight or too loose. A fluid value grows continuously, so every screen gets space in proportion to its width, and you write one declaration instead of three.
The same math as fluid type
Spacing uses exactly the same linear formula as font sizes: a minimum, a maximum and a straight line between two viewport widths. The difference is in the numbers you choose. Spacing often grows by a larger factor than text โ going from 24px to 64px of section padding is common โ because whitespace does not have to stay readable. The WCAG 2.5ร zoom note does not apply to spacing, but it still appears as a reminder when you reuse the value for text.
Building a spacing scale
For a consistent system, define a handful of fluid space tokens such as --space-s, --space-m and --space-l, each with its own min and max. Use the small ones for gaps inside components, the middle ones for card padding and the large ones between page sections. Pair them with a fluid type scale using the same viewport range so text and space grow in step.
In Tailwind, apply the result as an arbitrary value such as p-[clamp(โฆ)], gap-[clamp(โฆ)] or my-[clamp(โฆ)]. The calculator outputs a ready-made class with underscores instead of spaces, which is how Tailwind expects spaces inside arbitrary values.
Tips
Keep spacing values in rem so they respect user font settings along with the text. Avoid fluid values for borders and hairlines, where fractional pixels can blur. Check the preview at 320px to make sure padding still leaves room for content.