推荐使用 nuxi module add tailwindcss 而非手动安装，因其自动配置 modules、补全 peer 依赖、生成含 content 的 tailwind.config.ts；content 必须显式声明扫描路径，否则 PurgeCSS 会误删 class，且 theme 扩展须写在 tailwind.config.ts 中。
直接用 @nuxtjs/tailwindcss 模块是最稳妥的方式，Nuxt 3 项目基本不需要手动配 PostCSS 或写 tailwind.config.js —— 它会自动帮你生成、注入、扫描文件路径。但如果你跳过关键步骤或混用旧版配置，反而会触发样式不生效、HMR 失败、content 扫描漏文件等问题。
为什么推荐 nuxi module add tailwindcss 而不是手动 npm install
这个命令不只是装包，它还会：
• 自动在 nuxt.config.ts 中插入 '@nuxtjs/tailwindcss' 到 modules 数组
• 检查并补全 tailwindcss、postcss、autoprefixer 等 peer 依赖（Nuxt 3.10+ 默认要求 tailwindcss@^3.4）
• 创建最小可用的 tailwind.config.ts（含 content 配置，指向 app.vue、pages/、components/ 等）
• 不会覆盖你已有的 tailwind.config.ts，但也不会自动迁移旧版 tailwind.config.js
手动 npm install 后忘了加 modules 或漏了 content，Tailwind 就只会编译出 base 样式，class 类名根本进不了最终 CSS。
tailwind.config.ts 的 content 字段必须显式声明
Nuxt 模块不会替你猜哪些文件要扫描。默认生成的 content 是安全的起点，但一旦你把组件放在 composables/ 或用了 definePageMeta 里的 layout 名，就得手动加进去：
立即学习“前端免费学习笔记（深入）”；
export default {
content: [
'./app.vue',
'./pages/**/*.{vue,ts}',
'./components/**/*.{vue,ts}',
'./layouts/**/*.vue',
'./composables/**/*.{ts}', // ← 不加这个，composable 里写的 class 可能被 PurgeCSS 干掉
'./plugins/**/*.{ts}' // ← 插件中动态注入的 class 也得扫
]
}
常见错误：
• 把 content 写成空数组 → 所有 utility class 全丢失
• 用 **/*.vue 却没包含 .ts → Composition API 里写的 class 不生效
• 在 dev 模式下没问题，build 后样式消失 → 几乎 100% 是 content 漏配
自定义颜色/间距等 theme 时，别改错文件位置
所有扩展必须写在 tailwind.config.ts 里，而不是 nuxt.config.ts。模块只读这个文件，nuxt.config.ts 里的 tailwindcss 字段是 Nuxt 2 时代的遗留项，Nuxt 3 已废弃。
正确写法：
import type { Config } from 'tailwindcss'
export default {
theme: {
extend: {
colors: {
primary: '#3b82f6',
'primary-dark': '#2563eb'
},
spacing: {
'18': '4.5rem' // ← 支持数字键名，但值必须是字符串
}
}
}
} satisfies Config
容易踩的坑：
• 在 nuxt.config.ts 里写 tailwindcss: { theme: { ... } } → 完全无效
• 用 theme: { colors: { ... } } 覆盖整个 colors 对象 → 会丢掉 Tailwind 原生的 gray、blue 等基础色
• satisfies Config 缺失 → TypeScript 类型检查失效，改错字段名也不报错
开发时 class 不热更新？检查 app.vue 是否被排除在 content 外
很多项目把全局样式逻辑写在 app.vue 的 <template></template> 里，比如 <div class="bg-primary text-white">。如果 <code>content 没包含 ./app.vue，这些 class 在 dev 模式下可能第一次加载正常，但修改后 HMR 不触发重新生成 CSS，导致样式“卡住”。
验证方法：
• 临时删掉 app.vue 中某行 class，保存 → 如果页面样式立刻变化，说明它已被扫描
• 运行 nuxi build --debug，看输出里有没有 Scanned app.vue for classes 类似日志
• 直接在 tailwind.config.ts 的 content 里加上 './app.vue'，90% 能解决
真正麻烦的是多入口场景（比如微前端子应用），这时候 content 得精确到每个入口文件，不能只靠通配符。
