运行 nuxi module add tailwindcss 可自动配置模块、依赖及 tailwind.config.ts（.ts 格式），再执行 npx nuxt prepare 生成 assets/css/tailwind.css；需手动补全 content 路径（如 composables/），确保单引号、无 node_modules；CSS 加载顺序须在 nuxt.config.ts 的 css 数组中显式声明；禁用 preflight 后用 @layer base 精准重置标签样式，@layer 必须位于对应 @tailwind 指令之后。
直接用 nuxi module add tailwindcss，别手装包
90% 的样式不生效问题，都卡在没跑这行命令，或跑了但没后续动作。它不只是装 @nuxtjs/tailwindcss，还会自动：把模块加进 nuxt.config.ts 的 modules 数组、补全 tailwindcss 和 postcss 等 peer 依赖、生成带 content 字段的 tailwind.config.ts（注意是 .ts，不是 .js）。漏掉 npx nuxt prepare 就不会生成 assets/css/tailwind.css，浏览器里会报 Unknown at rule @tailwind。
content 路径必须手动对齐真实目录结构
默认生成的 content 只覆盖 app.vue、pages/、components/，但只要项目里有这些情况，就得手动加进去：
-
composables/目录下用了useButtonStyles()返回 class 字符串 -
definePageMeta里动态写layout: 'dashboard' - 用
defineComponent或defineAsyncComponent，且 class 写在字符串模板里
路径必须用单引号，不能包含 node_modules 或未使用的目录，否则 JIT 编译变慢。示例：
export default defineConfig({
content: [
'./app.vue',
'./pages/**/*.{vue,ts}',
'./components/**/*.{vue,ts}',
'./composables/**/*.{ts}', // ← 手动加这一行
'./layouts/**/*.{vue,ts}',
],
})
加载顺序错乱？靠 css 配置项硬控，别信 import 顺序
Nuxt 3 会重排所有 CSS 加载顺序，app.vue 里的 import 无效。必须在 nuxt.config.ts 的 css 数组里显式声明层级：
- 先加载第三方库（如
~/assets/css/element-plus.css） - 再加载自定义重置/覆盖（如
~/assets/css/main.css） - 最后才是
~/assets/css/tailwind.css（仅含三行：@tailwind base、@tailwind components、@tailwind utilities）
注意：@layer components 必须和 @tailwind components 在同一个文件里，否则无效；main.css 里写的 @layer 会被当成普通 CSS 插入 bundle 开头，永远压不过 Tailwind 的 utility 类。
被第三方组件库样式干掉？先关 preflight，再精准接管
Tailwind 的 @layer base（即 preflight）会直接重置 button、input 等标签样式，和类名无关。Element Plus 按钮变透明、Naive UI 输入框边框消失，根源就在这。解决顺序是：
- 关掉 preflight：
corePlugins: { preflight: false }放进tailwind.config.ts的theme外层 - 用
@layer base在tailwind.css里精准接管需要的标签规则（比如只重置body的 margin，不动button） - 避免全局
important: true——它会让所有工具类带!important，后续局部微调（如!text-sm）直接失效
真正容易被忽略的是：prefix: 'tw-' 只防类名冲突，对 preflight 标签重置完全无效；而 @layer 如果写错位置（比如 @tailwind utilities 放在 @layer utilities 前面），你写的扩展类就根本不会进最终 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
