为什么要让间距流式变化
宽松的留白让桌面布局显得从容，但同样 96px 的区块内边距放在手机上会浪费三分之一的屏幕。固定断点只能分段解决这个问题，平板上的间距往往不是太紧就是太松。流式数值连续增长，每块屏幕都能获得与宽度成比例的空间，而你只需写一条声明，而不是三条。
与流式字体相同的数学原理
间距使用的线性公式与字号完全相同：一个最小值、一个最大值，以及两个视口宽度之间的一条直线。区别在于你选择的数值。间距的增长倍数通常比文字更大，例如区块内边距从 24px 增加到 64px 很常见，因为留白不需要保持可读。WCAG 2.5 倍缩放提示不适用于间距，但当你把该值复用到文字上时，它仍会作为提醒显示。
建立间距体系
为了保持一致，可以定义几个流式间距令牌，例如 --space-s、--space-m 和 --space-l，各自设定最小值和最大值。小的用于组件内部的间隙，中等的用于卡片内边距，大的用于页面区块之间。再搭配一套使用相同视口范围的流式字号比例，文字和留白就能同步增长。
在 Tailwind 中，可以用任意值的形式应用结果，例如 p-[clamp(…)]、gap-[clamp(…)] 或 my-[clamp(…)]。计算器会输出用下划线代替空格的现成类名，这正是 Tailwind 在任意值中表示空格的方式。
小贴士
间距同样使用 rem，让它和文字一起遵循用户的字号设置。边框和细线不要使用流式数值，因为小数像素可能导致模糊。在 320px 下查看预览，确认内边距仍为内容留出足够空间。