nuxi module add tailwindcss 是首选，它自动配置 modules、补全 peer 依赖、生成含 content 的 tailwind.config.ts 且不覆盖旧配置；漏执行或 content 路径不全会导致样式不生效。
nuxi module add tailwindcss，别手动装包或写配置文件——90% 的样式不生效问题都出在漏掉这一步或后续路径没配对。
为什么 nuxi module add tailwindcss 是首选
这个命令不是简单装个包，它会一次性做完四件事：
• 自动把 '@nuxtjs/tailwindcss' 加进 nuxt.config.ts 的 modules 数组
• 检查并补全 tailwindcss、postcss、autoprefixer 等 peer 依赖（Nuxt 3.10+ 要求 tailwindcss@^3.4）
• 生成带 content 字段的 tailwind.config.ts（不是 .js），默认扫描 app.vue、pages/、components/
• 不覆盖已有的 tailwind.config.ts，但也不会帮你迁移旧的 tailwind.config.js
手动 npm install @nuxtjs/tailwindcss 后只改 nuxt.config.ts，却忘了加 content，Tailwind 就只编译 base 样式，text-red-500 这类 class 根本不会进最终 CSS。
content 字段必须显式声明扫描路径
模块不会猜你哪些文件里写了 Tailwind class。默认生成的 content 是安全起点，但以下情况必须手动加进去：
• 把组件逻辑放在 composables/ 目录下（比如用 useButtonStyles() 返回 class 字符串）
• 在 definePageMeta 里动态写 layout 名（如 layout: 'dashboard'）
• 使用了 defineComponent 或 defineAsyncComponent 且 class 写在字符串模板里
示例（tailwind.config.ts）：
export default defineConfig({
content: [
'./app.vue',
'./pages/**/*.{vue,ts}',
'./components/**/*.{vue,ts}',
'./composables/**/*.{ts}', // ← 手动加这一行
'./layouts/**/*.{vue,ts}',
],
theme: {
extend: {},
},
plugins: [],
})
别混用 tailwind.config.js 和 tailwind.config.ts
Nuxt 3 默认期望 tailwind.config.ts；如果你手动生成了 .js 文件，又没删掉它，模块可能读错配置，导致 HMR 失效或 PurgeCSS 漏删 class。
• 已有 tailwind.config.js？先重命名为 tailwind.config.ts，再按 TypeScript 语法调整（比如把 module.exports = { ... } 改成 export default defineConfig({ ... })）
• 想用 @tailwindcss/forms 插件？在 plugins 数组里加 require('@tailwindcss/forms')，但注意它不兼容 tailwindcss@4.x（目前稳定版仍是 v3.4）
常见报错 Error: Cannot find module '@tailwindcss/forms'，大概率是 devDependencies 里没装这个包，或者装了但版本冲突。
暗模式等扩展主题要靠 theme.extend.colors 配合 CSS 变量
想用 @nuxtjs/color-mode 切换深色/浅色，不能只靠 class 切换，还得让 Tailwind 认得你的变量：
• 在 app.vue 或根布局里加 :class="{ 'dark': isDark }"
• 在 tailwind.config.ts 的 theme.extend.colors 里映射 CSS 变量：bgTheme: 'var(--bg-color)'
• 然后就能在模板里写 class="bg-bgTheme text-textTheme"
漏掉 theme.extend.colors 这步，bg-bgTheme 就不会被解析，哪怕 DOM 上有 dark class 也没用。
真正容易被忽略的是：PurgeCSS 对内联 style 或动态拼接的 class（如 class="text-${color}-500"）无能为力，这类场景必须把所有可能的值显式列进 content，或者改用 safelist。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
