必须完整重写 theme.spacing 而非 extend.spacing，否则间距比例断裂、第三方组件错位；extend 只合并不覆盖，默认键值不变，新增键与原键无比例关系，jit 编译器仅静态分析键值，需全量定义或函数生成，且须重启 dev server。
直接在 tailwind.config.js 的 theme.spacing 下完整重写对象，而不是往 extend.spacing 里塞新键——否则间距比例断裂、第三方组件错位、团队成员反复查文档。
为什么 extend.spacing 不能加新间距键
它只做“合并”，不覆盖默认键。你写 extend: { spacing: { 'xs': '0.125rem' } }，mt-xs 确实能用；但 mt-4 还是默认的 1rem，mt-8 是默认的 2rem，而你新加的 xs 和它们之间毫无比例关系。更麻烦的是，像 @headlessui/react 这类库内部调用 theme('spacing.4')，取到的仍是原始值，组件内边距不会随你改动变化。
- 常见错误现象：
mt-1_5写了但 computed 样式里压根没这条规则，控制台也无报错 - 真实后果：设计稿按 8px 基准，
mt-3应该是 24px，但默认'3'是'0.75rem'（12px），结果所有mb-3都缩了一半 - 根本原因：Tailwind JIT 编译器只认静态可分析的键值对，
extend.spacing里的新增键能生成类，但旧键完全不受影响
theme.spacing 必须完整重写，不是“扩展”
想统一用 8px 基准？别只改 '8'，要把 '0' 到 '96' 全列出来，或用函数生成。否则缺失的键会回退到内置值，比如你只写了 { '1': '0.125rem', '2': '0.25rem' }，那 mt-4 就还是 1rem，和你的 mt-2 不成倍数。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安全写法：
spacing: (n) => `${n * 8}px`→mt-3自动是24px，pb-0.5是4px - 语义化写法：
spacing: { 'xs': '0.125rem', 'sm': '0.25rem', 'base': '0.5rem', 'lg': '1rem' }→ 类名清晰，不依赖数字推算 - 必须重启 dev server：HMR 不监听
tailwind.config.js变更，改完不重启，CSS 规则压根不生成
键名和值的合法性陷阱
键名最终拼进 class 名，所以 '1.5' 要加引号，但小数点本身会让 CSS 类名非法（mt-1.5 不是合法选择器）。Tailwind 会静默跳过这个键，不报错也不生成规则。
- 推荐键名：
'1_5'→ 生成mt-1_5（下划线自动转连字符），或'quarter'→mb-quarter - 禁止键名：
'1/2'、'2x'、空格、中文、全角符号——整个键会被忽略 - 值必须是静态字符串：
'calc(1rem - 2px)'、${base}px、scale(0.5)全无效；'10%'虽能编译，但嵌套深了容易失准
负间距和第三方组件兼容性要点
负值间距（如 -mt-4）靠 Tailwind 自动取反实现，前提是正向值配对。如果你把 '4' 设成 '0'，那 -mt-4 就是 margin-top: 0，不是 -0——这点常被忽略。
- 插件兼容性：只要没硬编码覆盖
theme.spacing，基本没问题；但@headlessui/react的gap-2会随你改的spacing.2动态变，这是优点也是风险点 - 全局影响：改
'3'从'0.75rem'到'0.625rem'，所有mb-3都收缩，上线前务必全局搜索确认 - 单位建议：优先用
rem或em，避免px（响应式退化）和%（上下文依赖太强）
最易被忽略的其实是“重写即全局生效”——你改一个键，所有用到它的工具类（mt-、pt-、gap-、甚至 w- 和 h-）都会跟着变。这不是 bug，是原子化设计的必然代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
