必须将新间距直接添加到 tailwind.config.js 的 theme.spacing 对象中，如 '1_5': '0.375rem'，键名需合法（下划线代替小数点）、值为带单位字符串，且修改后必须重启 dev server 才生效。
直接在 tailwind.config.js 的 theme.spacing 对象里加键值对，就能用 mt-1_5、py-xs 这类类名——不是写在 extend.spacing，也不用覆盖默认值。
必须写在 theme.spacing，不是 extend.spacing
很多人把新间距塞进 theme.extend.spacing，结果编译后完全没生成对应 CSS 类。Tailwind 只从 theme.spacing 读取“新增键”，extend.spacing 仅用于扩展现有键的值（比如改 4 的值），不能加新 key。
-
theme.spacing是主对象，你往里加'xs': '0.125rem'，就能立刻用p-xs -
theme.extend.spacing是空对象，默认不参与“新增类名”的生成逻辑 - 错误写法：
extend: { spacing: { '1.5': '0.375rem' } }→ 不生效 - 正确写法：
spacing: { '1_5': '0.375rem', xs: '0.125rem' }
键名必须是合法 CSS 类名，小数点要转义
写 1.5 会报 JS 解析错误；写 1.5（不带引号）会被当成数字字面量，对象 key 自动转成字符串后含非法字符，最终类名无法匹配。
- ✅ 推荐用下划线：
'1_5': '0.375rem'→ 生成mt-1_5（Tailwind 自动把_转成-） - ✅ 语义化别名：
quarter: '0.25rem'→ 生成mb-quarter - ❌ 错误：
1.5: '0.375rem'（无引号）、'1.5': '0.375rem'（含小数点） - ⚠️ 注意：即使值合法，key 名非法也会导致整个键被忽略，控制台可能不报错但类不出现
值必须是带单位的字符串，且单位要稳妥
Tailwind JIT 引擎只接受静态可分析的长度值，不解析 calc、变量、函数调用。单位选得不好，会导致响应式退化或跨设备表现不一致。
- ✅ 推荐：
'0.125rem'、'2px'、'10vh'—— 浏览器原生支持，JIT 能识别 - ⚠️ 慎用：
'10%'—— 百分比依赖父容器，计算路径复杂，容易在嵌套中失准 - ❌ 无效：
calc(1rem - 2px)、${baseSpacing}rem、scale(0.5)—— JIT 完全跳过 - ? 提示：如果设计系统用 8px 基数，优先用默认映射（
m-2= 8px），别重定义2: '8px'，否则和 Figma/设计稿对不上，团队协作成本陡增
改完必须重启 dev server，HMR 不管用
修改 tailwind.config.js 后，Vite、Next.js、Remix 等框架的热更新不会重新加载 Tailwind 配置。不重启，新加的 spacing 就永远不出现在生成的 CSS 里。
- 常见现象：写了
'xs': '0.125rem'，但pt-xs在浏览器里没效果，检查元素 computed 样式也找不到 - 确认方式：重启后，在终端看 Tailwind 是否打印 “Rebuilding…” 或类似提示
- 额外排查点：检查文件是否是
tailwind.config.cjs（某些框架默认找 .cjs），或配置是否被content路径排除导致 JIT 漏掉类名 - 如果用了插件（如 @headlessui/react），注意它内部硬编码的
gap-2会随你改spacing.2一起变——这是联动，不是 bug
最容易被忽略的是键名合法性与重启动作：一个拼写错误的 key（比如忘了引号或用了点号），加上没重启服务器，两个小问题叠在一起，就会让人花半小时查“为什么 class 不生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
