css数组路径必须以~/或@/开头且指向assets目录，缺扩展名、用相对路径或绝对url均报错；static文件需用head.link注入；第三方库须指定dist路径；加载顺序影响样式覆盖，tailwind应放最后。
css 数组里写错路径会导致 404 或 SSR 渲染失败
路径必须以 ~/ 或 @/ 开头，且指向 assets/ 目录下的可构建文件。Nuxt 不会解析相对路径或缺扩展名的写法，服务端构建时直接报 Module not found 错误。
-
~/assets/css/global.css✅ 正确（assets 下文件走 webpack，SSR 可见） -
./assets/css/global.css❌ 错误（config 文件中不识别相对路径） -
~/assets/css/global❌ 错误（漏掉.css，构建时报 404） -
/css/global.css❌ 错误（会被当绝对 URL 处理，找不到本地文件）
static 目录里的 CSS 不能塞进 css 数组
static/ 是纯静态复制目录，内容不参与 webpack 构建。若把它写进 css 数组，Nuxt 会在服务端尝试 resolve 模块，结果必报错。
- 正确做法：用
app.head.link注入，如{ rel: 'stylesheet', href: '/css/vendor.css' }（路径以/开头，对应static/css/vendor.css） - 错误做法：
css: ['static/css/vendor.css']→ SSR 阶段无法解析模块 - 混用风险：同时用
css数组和head.link引同一份 CSS，HTML 中出现两条<link>，加载顺序不可控
第三方 UI 库 CSS 必须指定 dist 路径，不能只写包名
Nuxt 的 css 数组本质是 webpack 的样式入口，只接受可解析的文件路径。写 'element-plus' 这类包名会失败，因为包本身不导出 CSS 文件。
-
element-plus/dist/index.css✅ 正确（已安装element-plus后可用） -
primevue/resources/primevue.min.css✅ 同理，必须明确到 dist 子路径 -
https://cdn.jsdelivr.net/npm/...❌ 不要放进css数组（SSR 不加载，FOUC 风险高） - 若用了
@element-plus/nuxt等官方模块，就别再手动加 CSS 路径，否则冗余且可能冲突
Tailwind 和自定义 CSS 的加载顺序直接影响样式是否生效
Nuxt 3 默认把 Tailwind 注入到全局 CSS 最前面，导致你写的 .btn { border-radius: 4px; } 被 rounded-full 覆盖——不是类没生成，是它在 CSS 文件里排太前了。
- 显式控制顺序：
css数组里把第三方库放最前，自定义重置/覆盖居中，tailwind.css（仅含三行@tailwind指令）放最后 -
@layer必须和对应的@tailwind components在同一文件内，拆开放不同 CSS 文件就失效 - 如果用了
@nuxtjs/tailwindcss模块，确认它没被你手动 import 的其他 CSS 干扰加载时机；检查浏览器 Elements 面板里background-color等属性来源，定位是否被后加载的 CSS 覆盖
onMounted 或 useAsyncData 里动态 import，服务端根本不会执行那段 JS，也就不会注入那部分 CSS —— 它压根不会出现在首屏 HTML 里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
