必须运行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 在预渲染阶段就彻底失效。


















