Tailwind.config.js 文件不存在时，需运行 npx tailwindcss init（基础配置）或 npx tailwindcss init -p（含 PostCSS 支持）创建；生成文件仅含空配置，须手动补全 content 路径、theme.extend 键值对结构及 plugins 等，否则自定义类不生效。
tailwind.config.js 文件不存在时怎么创建
Tailwind 默认不生成配置文件，必须手动初始化。运行 npm run build 或 tailwindcss init 都不会自动创建完整可编辑的 tailwind.config.js —— 正确命令是：
-
npx tailwindcss init -p（带 PostCSS 支持） - 或
npx tailwindcss init（仅基础配置）
执行后会生成一个极简文件，只含 module.exports = { content: [], theme: {}, plugins: [] }。这个空配置能跑，但所有自定义类（比如 text-brand）都还不会生效，得往下补全。
theme.extend 里加颜色/间距/字体必须用对象嵌套
直接往 theme.extend 里写数组或字符串会报错，Tailwind 要求每个扩展项是明确键值对的对象结构。常见错误写法：extend: { colors: ['red', 'blue'] } —— 这根本不会被识别。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
colors: {
brand: '#3b82f6',
'brand-dark': '#1d4ed8'
},
spacing: {
'18': '4.5rem',
'128': '32rem'
},
fontFamily: {
sans: ['Inter', 'system-ui']
}
}
}
}
注意：fontFamily.sans 是覆盖默认 sans 字体栈，不是新增一个叫 sans 的新族；如想新增字体族（比如叫 display），要写 fontFamily: { display: ['Georgia', 'serif'] }，然后用 font-display 类。
content 数组漏掉自定义组件路径会导致类不生成
Tailwind 是按需生成 CSS 的，它只扫描 content 数组里声明的文件路径中出现的类名。如果你在 Vue 组件里写了 class="bg-brand"，但 content 没包含 ./src/components/**/*.vue，那最终 CSS 里就根本没有 bg-brand 这个规则。
典型配置应类似：
content: [
'./index.html',
'./src/**/*.{js,ts,vue}',
'./src/components/**/*.{js,ts,vue}'
]
特别注意：
- 路径通配符必须用单引号，双引号在某些 Node 版本下会解析失败
- 如果用了 SFC（单文件组件），
.vue后缀不能省；.jsx或.tsx也得显式列出 - 开发时改了
tailwind.config.js必须重启 dev server，热更新不监听配置文件变更
自定义类名冲突或覆盖默认行为的隐性风险
比如你加了 spacing: { '4': '1rem' }，这会完全覆盖 Tailwind 原生的 4（即 1rem），看起来没变，但一旦原生逻辑升级或你换版本，行为可能突变。更安全的做法是用新名： 'space-xs': '0.5rem'。
另一个坑是命名太泛：定义 colors: { primary: '#3b82f6' } 看似合理，但 primary 很容易和 UI 库、CSS 变量、甚至未来 Tailwind 官方扩展撞名。建议加前缀或业务标识，比如 app-primary 或 ui-accent。
最后提醒：所有自定义类名都会参与 PurgeCSS 清理流程。如果某个类只在 JS 字符串拼接中出现（比如 className={`text-${status}`}），且 status 值未在 content 扫描到的静态文本中出现，该类会被删掉 —— 这时候得用 safelist 显式保活。
