自定义间距必须写在 tailwind.config.js 的 theme.spacing 对象里，而非 extend.spacing；新键名需合法（如 '1_5'），值须为静态字符串（如 '0.375rem'），修改后需重启开发服务器。
直接改 theme.spacing，别碰 extend.spacing
自定义间距必须写在 tailwind.config.js 的 theme.spacing 对象里，不是 extend.spacing。后者只用于扩展现有键（比如把默认的 '4' 从 '1rem' 改成 '2rem'），但不能加新键名——你写 extend: { spacing: { 'xs': '0.125rem' } }，px-xs 永远不会生成。
常见错误现象：mt-1_5 写了但没效果，检查 computed 样式里压根没有对应 CSS 规则；控制台也无报错，纯静默失效。
- 正确位置：
module.exports = { theme: { spacing: { 'xs': '0.125rem', '1_5': '0.375rem' } } } - 错误位置：
theme: { extend: { spacing: { ... } } }→ 新键被忽略 - 如果只是微调个别值（如想让
6变成'1.75rem'），仍需把其他默认键一并列出来，否则缺失的键会回退到内置值，造成比例断裂
键名必须合法，小数点得转义
Tailwind 把 spacing 对象的 key 直接拼进类名，所以 '1.5' 这种写法会出问题：不加引号是 JS 数字字面量，加引号含小数点又非法（mt-1.5 不是合法 CSS 类名）。它不会报错，但编译时跳过该键。
推荐两种写法：
-
'1_5': '0.375rem'→ 生成mt-1_5（下划线自动转连字符） -
'quarter': '0.25rem'→ 生成mb-quarter，语义清晰且无兼容风险 - 避免用
'1/2'、'2x'、空格或中文——这些都算非法字符，键会被整个忽略
值必须是静态字符串，单位要稳妥
Tailwind JIT 引擎只接受能静态分析的长度值。动态表达式、CSS 变量、calc() 全部无效。
- ✅ 安全值：
'0.125rem'、'8px'、'10vh'—— 浏览器原生支持，JIT 可识别 - ⚠️ 慎用：
'10%'—— 百分比依赖上下文，嵌套深了容易失准 - ❌ 无效：
calc(1rem - 2px)、${base}px、scale(0.5)—— 编译阶段直接跳过，不报错也不生成
如果你按 8px 基准设计，别只改 '8': '64px' 就完事。默认 '4' 还是 '1rem'（16px），mx-4 和 mx-8 就不是 2 倍关系——这种断裂会让团队成员反复查文档、手动补类名。
改完必须重启 dev server，HMR 不管用
所有主流框架（Vite、Next.js、Remix）的热更新机制都不会重新加载 tailwind.config.js。你改了 spacing 却没重启，新加的类名就永远不出现在生成的 CSS 里。
确认是否生效的最快方式：
- 重启开发服务器
- 打开浏览器开发者工具，搜索
mt-1_5或你定义的类名，看 Styles 面板里有没有对应规则 - 检查控制台是否有
Invalid value for `theme.spacing`报错（通常是值没加引号或单位缺失）
最隐蔽的问题往往不在代码本身，而在于你改了 '3' 的值，却忘了 @headlessui/react 里某个 gap-3 组件会跟着缩进变小——这种耦合很难提前预判，上线前务必全局扫一遍关键布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
