首选@nuxtjs/tailwindcss模块，因其自动配置PostCSS、生成tailwind.config.ts、注入CSS入口；手动配置易致build后class丢失，content必须显式覆盖所有含class的文件。
直接用 @nuxtjs/tailwindcss 模块，别手写 PostCSS 或手动配 tailwind.config.js —— 这是 Nuxt 3 中最稳、最省事、也最不容易出错的方式。
为什么 @nuxtjs/tailwindcss 是首选
它不是“可选项”，而是 Nuxt 3 官方推荐路径：自动注册 PostCSS 插件、自动生成带 content 扫描的 tailwind.config.ts、自动注入 @tailwind 指令所需的 CSS 入口。你手动 npm install + npx tailwindcss init 得来的配置，缺了模块层的路径绑定和 HMR 支持，dev 时看着正常，build 后 class 就消失。
常见错误包括：
- 手动安装后没在
nuxt.config.ts的modules里加'@nuxtjs/tailwindcss'→ Tailwind 根本不启动 - 用了旧版
tailwind.config.js，但 Nuxt 3.10+ 默认只读tailwind.config.ts→ theme 扩展无效 - 误以为模块会自动扫描所有目录 → 实际上漏掉
composables/或plugins/里的动态 class，build 后就没了
content 字段必须显式覆盖所有含 class 的文件
Tailwind 不运行 JS，只做静态文本扫描。哪怕你在 useTheme() 里返回 class="bg-blue-500"，只要 content 没扫到那个 .ts 文件，这个类名就不会进最终 CSS。
立即学习“前端免费学习笔记（深入）”；
安全起见，tailwind.config.ts 的 content 至少包含：
'./app.vue''./pages/**/*.{vue,ts}''./components/**/*.{vue,ts}''./layouts/**/*.vue'-
'./composables/**/*.{ts}'（如果里面有拼接 class 的逻辑） -
'./plugins/**/*.{ts}'（比如插件中通过app.config.globalProperties注入 class）
千万别写空数组、别漏 .ts 后缀、别把 ./nuxt.config.ts 加进去（会报错：ERROR Importing directly from a nuxt.config file is not allowed）。
动态 class 和 JIT 模式的关系
JIT 模式（v3.2+ 默认开启）本身不解决动态 class 漏扫问题。它只是让编译更快、支持任意值（如 top-[123px]），但前提是这些字符串得被静态看到。
以下写法在 build 时大概率失效：
-
:class="`text-${color}-500`"（color是响应式变量） -
class="bg-{{ theme }}-500"（模板字符串或插值） -
class={ [theme]: true }（对象语法，且theme值未在扫描范围内硬编码）
可靠方案只有两个：
- 把可能的值全部列在
content能扫到的文件里（比如定义一个const VALID_THEMES = ['blue', 'green']） - 改用
@layer components提前声明类，绕过扫描限制
暗黑模式、自定义颜色等 theme 扩展写在哪
所有 theme.extend 必须写在 tailwind.config.ts 里，不是 nuxt.config.ts。后者中的 tailwindcss 字段是 Nuxt 2 遗留项，Nuxt 3 已忽略。
例如要加 CSS 变量驱动的主题色：
module.exports = {
content: [...],
theme: {
extend: {
colors: {
bg: 'var(--color-bg)',
text: 'var(--color-text)'
}
}
}
}
然后在 app.vue 或全局 CSS 中定义 :root { --color-bg: #fff; --color-text: #000; } 和 .dark { --color-bg: #111; --color-text: #eee; }。别忘了在 content 里包含 app.vue，否则这些变量名不会触发 class 生成。
真正容易被忽略的是：content 漏配比 theme 写错更致命——前者让整个 utility class 系统失效，后者只是颜色没变。
