tailwind中extend.spacing不继承默认值，仅合并新增键，会导致未声明的mt-4等类彻底消失；正确做法是用theme.spacing完整重写或确保extend包含全部所需键。
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 对象没被继承进来。
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- ✅ 正确做法：用
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 组件的<template></template>里，HTML 文件里根本没出现 - ✅ 快速验证：临时在
index.html里写一行<div class="mt-4"></div>，再构建看是否生效；若生效，说明是扫描路径问题
class 属性写错或被覆盖，导致 spacing 类没机会应用
间距类本身没问题，但它们可能被其他因素拦在门外：
- ❌ 把
class拼成clas或className—— 浏览器直接忽略整个属性，mb-6当然不生效 - ❌ 在 Vue/React 中用对象语法写
:class="{ 'mt-2': visible }"，但visible是false，结果连基础类都没挂上 - ❌ 父元素设了
display: flex且子项用了margin，但 Flex 布局下某些 margin（如垂直方向）可能被折叠或忽略，误以为mb-8失效 - ✅ 排查技巧：打开 DevTools → Elements → 找到对应元素 → 看 Computed 标签页里
margin-bottom是否有值；没有，说明类根本没进 CSS；有值但不对，说明是逻辑或布局干扰
自定义 spacing 值里混入了单位或表达式
Tailwind 的 spacing 配置必须是纯字符串值（如 '1rem'），不能是计算式、变量或带括号的 CSS 函数。哪怕只多一个空格或引号类型不一致，整个 spacing 配置就会静默失败。
- ❌
'4': 'calc(1rem + 4px)'—— JIT 不解析 calc，该键会被跳过 - ❌
'6': `1.5rem`—— 模板字符串在 CJS 环境中可能报错或被忽略 - ❌
'8': '2rem '—— 末尾空格会导致生成的类（如mt-8）规则为空，浏览器无视 - ✅ 安全写法统一用双引号 + 标准单位：
'4': '1rem'、'12': '3rem'
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
