必须覆盖整个 theme.spacing 而非仅 extend.spacing，因 extend 仅浅合并、不覆盖默认键，导致等比逻辑断裂、第三方组件取值错误、UI错位；推荐用函数动态生成如 spacing: (n) => ${n * 8}px 对齐 8px 设计规范。
直接在 tailwind.config.js 的 theme.spacing 对象里重写全部键值对，而不是只往 extend.spacing 里加新键——否则类名语义断裂、UI库内边距错位、团队成员反复查文档。
为什么必须覆盖整个 theme.spacing 而非仅 extend.spacing
Tailwind 的 extend.spacing 只做浅合并，不覆盖默认键。比如你只在 extend.spacing 里写 { '8': '64px' }，那 mt-4 仍用默认的 '1rem'（16px），而 mt-8 是你设的 64px —— 表面是 4 倍，实际破坏了等比逻辑。
- 第三方组件（如
@headlessui/react）内部调用theme('spacing.4')时，取到的仍是默认值，导致按钮内边距偏小 -
space-y-4和space-y-8间距差不是两倍，子元素视觉节奏混乱 - 设计稿按 8px 基准时，
mt-3应为 24px，但默认'3'是'0.75rem'（12px），结果每次都要手动补mt-[24px]
如何安全地重写 theme.spacing 以匹配 8px 设计规范
推荐用函数动态生成，避免手写遗漏或单位错乱。例如：
module.exports = {
theme: {
spacing: (n) => `${n * 8}px`
}
}这样 mt-1 → 8px，mb-0.5 → 4px，space-x-3 → 24px，完全对齐 8px 网格。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用
rem，请确保根字体大小为16px，否则spacing: (n) => `${n}rem`会失准 - 函数返回值必须是静态字符串，不能含
calc()、模板变量或 CSS 变量引用 - 改完必须重启开发服务器，HMR 不监听 config 变更
自定义键名和值的合法性陷阱
键名会直接拼进 class 名，所以 '1.5' 这种写法看似合理，但 JS 解析时是数字字面量，加引号又含非法字符（.），最终 mt-1.5 不会生成任何 CSS 规则，且无报错。
- ✅ 合法键名：
'1_5'（生成mt-1_5，下划线转连字符）、'quarter'（生成mb-quarter） - ❌ 非法键名：
'1/2'、'2x'、'xs '（尾随空格）、中文、全角符号 - ✅ 安全值：
'0.125rem'、'8px'、'10vh' - ❌ 无效值：
calc(1rem - 2px)、${base}px、scale(0.5)—— JIT 编译阶段跳过，静默失效
负值和响应式间距的注意事项
-mt-4 这类负边距会自动取反，所以只要正向值配对，负向就自然生效；但如果你把 '4' 设为 '0'，那 -mt-4 就是 margin-top: 0，不是 -0 —— 这点容易被忽略。
- 响应式前缀（如
md:mt-6）只对已定义的键生效，md:mt-1_5能用，前提是'1_5'已在theme.spacing中声明 - 如果项目大量使用
gap（如gap-4），注意它也依赖theme.spacing，改了会影响网格项间距 - 修改后务必检查浏览器开发者工具的 computed 样式，确认对应规则真实存在，而非仅 class 名出现
