应在tailwind.config.js中直接重写theme.spacing对象，推荐用函数如spacing: (n) => ${n * 8}px统一基准，避免使用extend导致不一致，且修改后必须重启开发服务器。
如何在tailwind.config.js里修改spacing比例
Tailwind默认的spacing是基于4px倍数（如1 = 0.25rem = 4px），但实际项目常需适配设计稿的8px或6px基准。改法很简单，但错配会导致所有mt-4、px-8等类名语义错乱。
- 打开
tailwind.config.js，找到theme.spacing配置项（未声明时默认继承内置值） - 直接覆盖整个
spacing对象，不要只改部分键——否则缺失的键会回退到默认值，造成不一致 - 推荐用函数动态生成，避免手动写死：比如8px基准可写
spacing: (n) => `${n * 8}px`，这样space-y-2就是16px，mb-0.5就是4px - 注意：若使用
rem单位（如spacing: (n) => `${n}rem`），需确保根字体大小为标准16px，否则换算会偏移
为什么不能只改theme.extend.spacing
theme.extend.spacing只会合并新增键，不会覆盖默认键。比如你extend加了{ '7': '28px' }，但mt-4仍按默认的16px计算，而mt-7才走你的28px——这会让团队成员困惑“为什么4和7不是等比”。
- 真实错误现象：
mx-4和mx-8间距差不是两倍，因为8被你extend进去了，但4还是默认值 - 正确做法：删掉
extend，直接在theme.spacing下完整重写 - 如果只想微调个别值（如把
16改成'64px'），必须显式列出所有其他键，否则它们会消失
使用calc()或负值时spacing配置的陷阱
当需要top: calc(100% + theme('spacing.4'))这类组合时，spacing值必须是纯数字+单位（如'1rem'），不能是函数或表达式。Tailwind的theme()函数不支持运行时计算。
- 错误写法：
spacing: (n) => `calc(${n * 4}px)`→ 编译报错Invalid value for spacing.4 - 安全写法：保持spacing为静态值，用CSS变量兜底，例如
spacing: { '4': 'var(--spacing-4, 1rem)' }，再在:root里定义--spacing-4: 16px - 负值间距（如
-mt-4）会自动取反，所以只要正向值配对，负向就自然生效；但如果你用spacing: { '4': '0' }，那-mt-4就是margin-top: 0，不是-0——这点容易被忽略
自定义spacing后class名失效的常见原因
改完配置不生效？大概率是缓存或键名拼写问题。Tailwind不会热重载config里的函数变更，必须重启构建进程。
- 检查
tailwind.config.js是否导出了module.exports，且spacing在theme层级下，不是plugins或content - 确认class名拼写：Tailwind对
spacing键名严格匹配，'1/2'和'1/2'（全角斜杠）会被视为不同键 - 开发时用
console.log打印生成的配置验证：console.log(require('./tailwind.config.js').theme.spacing) - 如果用Vite或Next.js，记得清除
.next或node_modules/.vite缓存，否则旧CSS可能残留
Tailwind的spacing本质是字符串映射表，它不关心你用px/rem/em，只认最终输出的CSS值。最易被忽略的是：改完必须重启dev server，且所有键必须显式声明——哪怕只是复制默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
