必须运行nuxi module add tailwindcss和npx nuxt prepare，否则不生成assets/css/tailwind.css及tailwind.config.ts，导致@tailwind指令报错、utility类丢失；需手动补全content路径（如composables/）、确保tailwind.css在nuxt.config.ts的css数组中排最后，并将@layer声明置于对应@tailwind指令之后。
直接用 nuxi module add tailwindcss，再跑 npx nuxt prepare，否则 Tailwind 类根本不会出现在最终 CSS 里——90% 的“样式不生效”问题都卡在这两步。
必须执行 npx nuxt prepare 才能生成可用的 CSS
只运行 nuxi module add tailwindcss 不会生成 assets/css/tailwind.css，浏览器控制台会报 Unknown at rule @tailwind。这个文件是 JIT 编译器的入口，里面只有三行：@tailwind base、@tailwind components、@tailwind utilities。没它，整个 Tailwind 就是空转。
-
npx nuxt prepare还会生成或校验tailwind.config.ts（注意是.ts，不是.js） - 检查
assets/css/tailwind.css是否真实存在，且内容为纯@tailwind指令 —— 如果是手动创建的，大概率路径或语法有误 - Vite 开发服务器启动后，若 Elements 面板里完全搜不到任何
bg-*或text-*规则，基本可断定这步被跳过了
content 路径必须手动对齐真实目录结构
模块自动生成的 content 往往只覆盖 app.vue、pages/、components/，但只要项目用了 composables/ 返回 class 字符串、或在 definePageMeta 里动态写 layout、或用 defineComponent 拼字符串模板，就得补全对应路径。
- 路径必须用单引号，例如
'./composables/**/*.{ts}' - 不能包含
node_modules或未使用的目录（比如tests/），否则 JIT 编译明显变慢 - 漏掉
composables/会导致useButtonStyles()返回的 class 在组件中无效，但页面里却正常——这种错位最难排查
CSS 加载顺序必须由 nuxt.config.ts 的 css 数组硬控
Nuxt 3 会忽略 app.vue 里的 import，所有 CSS 加载顺序以 nuxt.config.ts 中 css: [] 的声明顺序为准。Tailwind 必须排在最后，否则 utility 类会被第三方库或自定义 CSS 覆盖。
- 正确顺序示例：
['~/assets/css/element-plus.css', '~/assets/css/main.css', '~/assets/css/tailwind.css'] -
@layer components必须和@tailwind components在同一个文件里（即tailwind.css），写在main.css里等于白写 - 禁用 preflight 后，用
@layer base重置样式时，该语句也必须放在tailwind.css中、且在@tailwind base之后
预渲染时 Tailwind 类是否生效，取决于 SSR 阶段能否识别到 class 字符串
服务端渲染时，Tailwind JIT 只扫描静态字符串。如果 class 是运行时拼接（如 class="bg-${color}"）、或来自 computed、或通过 useHead 动态注入，SSR 阶段就无法提取，对应样式不会进入预渲染 HTML。
- 确保关键 class 出现在
template的字面量中，例如<div class="bg-blue-500 text-white"></div> - 避免在
setup()里用逻辑生成 class 并传入模板，除非你接受首屏无样式闪动（FOUC） - 使用
definePageMeta({ layout: 'dashboard' })时，对应layouts/dashboard.vue中的 class 也要落在content路径内，否则 SSR 不识别
最常被忽略的是：以为装了模块就万事大吉，结果 tailwind.config.ts 里 content 没补全、assets/css/tailwind.css 没生成、CSS 加载顺序靠猜——这三个点任何一个出错，Tailwind 在预渲染阶段就彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
