必须完整重写theme.spacing对象，因extend.spacing仅合并新增键而不覆盖默认键，导致mt-4与mt-8间距比例失真、UI库内边距异常及团队推断困难。
直接在 tailwind.config.js 的 theme.spacing 下完整重写对象，而不是用 extend.spacing —— 否则你会得到混搭的默认值和自定义值，导致 mt-4 和 mt-8 间距差不是两倍。
为什么不能只改 theme.extend.spacing
extend.spacing 只会合并新增键，不会覆盖已有的 '1'、'2'、'4' 等默认键。比如你加了 { '8': '64px' }，但 mt-4 仍走默认的 '1rem'（16px），而 mt-8 是你设的 64px —— 表面看是 4 倍关系，实际破坏了等比逻辑。
- 真实错误现象：
mx-4是 16px，mx-8是 64px，但mx-6根本不存在（没定义），团队成员无法推断中间值 - 设计稿按 8px 基准时，
mt-3应该是 24px，但默认'3'是'0.75rem'（12px）——不一致会反复手动补类名 - 插件或 UI 库（如
@headlessui/react）内部引用theme('spacing.4')，若你只 extend，它取到的仍是默认值，导致组件内边距意外偏小
怎么安全地重写整个 spacing 对象
删掉 extend.spacing，把全部键值对明确定义在 theme.spacing 下。推荐用函数生成，避免手误漏项：
module.exports = {
theme: {
spacing: (n) => `${n * 8}px`, // 所有数字键都按 8px 基准：mt-1 → 8px，mt-2 → 16px，mt-0.5 → 4px
}
}
- 函数写法要求所有使用处都是纯数字键（如
mt-1、px-2.5），不能混用字符串键（如'sm'） - 若需保留语义键（如
'sm'、'lg'），必须显式写出：spacing: { 'sm': '8px', 'lg': '32px', '1': '8px', '2': '16px', ... } - 单位选
rem更稳妥，但前提是根字体大小为 16px；若用px，高 DPI 屏幕下可能模糊 - 修改后必须重启开发服务器，HMR 不会监听
tailwind.config.js变更
带小数点或特殊字符的键名怎么写
Tailwind 要求键名是合法 CSS 类名组成部分，所以 1.5 这类不能直接写，得加引号并转义：
- 正确写法：
'1_5': '0.375rem'→ 生成类名mt-1-5（下划线自动转连字符） - 也支持语义别名：
'quarter': '0.25rem'→py-quarter，可读性更强 - 禁止写
1.5: '0.375rem'（JS 解析报错）、'1.5': ...（类名生成失败）、'2/3': ...（斜杠非法） - 值必须是字符串，且含合法单位：
'2px'、'0.5rem'、'10vh'都行；2或0.5（无单位）会编译报错
用 calc() 或负值时的隐藏陷阱
theme('spacing.4') 在 CSS 中被静态解析，不支持运行时计算。所以：
- 错误写法：
spacing: (n) => `calc(${n * 4}px)`→ 编译时报Invalid value for spacing.4 - 安全方案：用 CSS 变量兜底，例如
'4': 'var(--spacing-4, 1rem)'，再在:root里定义--spacing-4: 16px - 负值间距（如
-mt-4）自动取反，但前提是正向值本身非零；若你设'4': '0'，那-mt-4就是margin-top: 0，不是-0—— 这点容易被忽略 - 动态值（如
env(safe-area-inset-top)）无法注入spacing，只能靠自定义属性 +calc()在具体样式中处理
最常被跳过的一步是：确认你改的是 theme.spacing，而不是 theme.extend.spacing；其次就是忘记重启 dev server —— 改了配置却看不到新类名，八成卡在这两个地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
