必须完整重写 theme.spacing 而非 extend.spacing，否则间距比例断裂、第三方组件错位；JIT 编译器仅静态分析键值，新增键与默认键无倍数关系，且需重启 dev server 才生效。
必须重写 theme.spacing，不能只用 extend.spacing
Tailwind 的 JIT 编译器只静态分析 theme.spacing 对象的键值对，extend.spacing 只做浅合并，不改变原有键的比例关系。你加一个 'xs': '0.125rem'，mt-xs 能用，但 mt-4 仍是默认的 1rem，两者毫无倍数关联——设计稿按 8px 基准时，mt-3 应为 24px，结果却输出 12px，所有间距视觉缩半。
更关键的是，第三方组件（如 @headlessui/react）内部调用 theme('spacing.4') 拿到的仍是原始值，不会随你 extend 变动。真实后果是：组件内边距错位、卡片留白塌陷、表单对齐偏移。
安全做法只有两种：
- 完整重写
spacing对象，例如：spacing: { '0': '0', '1': '8px', '2': '16px', '3': '24px', ... } - 用函数生成：
spacing: (n) => `${n * 8}px`→pt-3自动编译为padding-top: 24px
pt/pb/pl/pr 这些类怎么映射到自定义值？
pt-3、pb-2 等 p 系列工具类直接读取 theme.spacing 中的键，不是“数字乘以某个基数”，而是严格字符串替换。比如你设了 spacing: { '3': '24px' }，pt-3 就生成 padding-top: 24px；若没定义 '3'，它会 fallback 到内置值 0.75rem（12px），和你的其他自定义值不成比例。
常见踩坑点：
- 写了
extend: { spacing: { '3': '24px' } }，但没动默认的'1'～'2'～'4'，导致pt-1/pt-2/pt-4仍用 rem，pt-3突然跳成 px，整个垂直节奏断裂 - 用了小数键名如
'1.5'，Tailwind 静默忽略（CSS 类名非法），py-1.5根本不生成规则，控制台零报错 - 推荐写法：
'1_5': '12px'→ 生成py-1_5（下划线自动转连字符），或'quarter': '4px'
改完 tailwind.config.js 为什么新类不生效？
HMR 不监听配置文件变更，修改 theme.spacing 后必须手动重启开发服务器，否则 CSS 规则压根不会重新生成。哪怕你清了缓存、硬刷新、删了 .next/cache 或 dist 目录，只要 dev server 没重启，mt-72 或 px-quarter 就永远是 404。
另一个容易被忽略的点是值的合法性：
-
'10%'能编译，但嵌套在 flex 容器或 grid item 中可能因父级尺寸未定而失准 -
calc(1rem - 2px)、${base}px、scale(0.5)全部无效——Tailwind 要求 spacing 值必须是静态字符串 - 负间距依赖正向值配对：
'4': '0'会导致-mt-4输出margin-top: 0，而不是-0；想用负值，必须先确保正向键有合理非零值
px 单位 vs rem 单位：选哪个更稳？
用 px 最直接对应设计稿（尤其 Figma 默认 8px 基准），但牺牲了用户缩放和系统字体设置的响应能力；rem 更语义化，但需要团队统一理解换算逻辑（比如 1rem = 16px 是假设，实际取决于 root font-size）。
折中方案更常用：
- 函数式写法：
spacing: (n) => `${n * 8}px`，既保持像素精度，又避免手写 100 行对象 - 语义化命名：
spacing: { 'xs': '0.125rem', 'sm': '0.25rem', 'base': '0.5rem', 'lg': '1rem' }，类名清晰（pt-base比pt-2更易维护） - 混合策略：保留
'0'～'96'数字键用 px，新增语义键如'card-gap'或'form-stack'用于复杂场景
真正难的不是写对配置，而是让所有人意识到：一旦改 spacing，就必须全量覆盖、必须重启、必须同步文档——漏掉任意一环，UI 就会在某次 PR 后悄悄错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
