Tailwind CSS间距类失效？检查spacing配置是否被覆盖

Tailwind CSS的间距类“失效”往往并非真正出错，而是源于配置误解、扫描遗漏、语法错误或布局干扰——比如`extend.spacing`会覆盖而非追加默认值，导致未显式声明的`mt-4`等类彻底不生成；JIT模式下content路径未覆盖JSX/Vue文件会让用到的类无法进入CSS；class属性拼写错误、条件渲染为false、Flex布局中margin折叠，甚至spacing配置里多一个空格或用了calc表达式，都可能让间距“消失”。找准是“没生成”还是“没生效”，才能精准破局。

tailwind.config.js 里 extend.spacing 覆盖了默认间距

如果你在 tailwind.config.js 中写了 extend.spacing，但没保留原始值，Tailwind 就会丢掉所有默认间距类（比如 mt-4、px-6），只生成你显式定义的那些。这不是“失效”，是压根没生成。

常见错误写法：

theme: {
  extend: {
    spacing: {
      '1': '0.25rem',
      '2': '0.5rem'
    }
  }
}

这段代码会让 mt-4、gap-8 等所有未声明的 spacing 类彻底消失——因为 extend 不是追加，而是合并覆盖，而 Tailwind 默认的 spacing 对象没被继承进来。

• ✅ 正确做法：用 theme.spacing 完整重写，或确保 extend.spacing 包含全部需要的键（包括默认值）
• ✅ 更安全的做法：删掉 extend.spacing，改用插件或自定义 CSS 变量控制特殊间距，避免破坏基础体系
• ⚠️ 注意：加了 '7': '1.75rem' 这类非标准值后，mt-7、p-7 全部会被打包进最终 CSS，体积明显上涨

用了 JIT 模式但 content 没扫到带间距类的文件

Tailwind 的 JIT（Just-in-Time）引擎只打包实际用到的类。如果你在 JS/TSX 中动态拼接间距类（比如 `mt-${size}`），或类名藏在字符串模板里，而 content 配置没覆盖这些文件路径，mt-4 就不会出现在输出 CSS 中。

• ❌ 错误配置：content: ["./src/**/*.{js}"] —— 漏了 .ts 或 .tsx，JSX 里的 className="mt-4" 就扫不到
• ❌ 错误写法：content: ["./**/*.html"] —— 但你的间距类全写在 Vue 组件的