全局CSS在Vue3中必须严格规范引入方式：main.js/ts中import最稳妥，需置于createApp前；App.vue中@import会泄漏且不参与PostCSS；index.html仅限CDN；Tailwind须三指令共存于同一文件且content配置完整。
全局CSS在 Vue3 项目里不是“能加就行”，而是必须分清作用域、加载时机和构建影响——加错位置或方式，轻则样式不生效，重则污染所有组件、破坏 scoped 隔离。
main.js 或 main.ts 中 import 是最稳妥的全局引入方式
这是唯一能确保 CSS 在整个应用启动前就注入 DOM 的路径，适用于 reset.css、base.css、字体声明等需要无条件生效的样式。
-
import必须写在createApp(App)之前，否则部分组件可能已渲染完成，样式补不上 - 路径要绝对正确，比如
import '@/assets/css/reset.css'；相对路径（如../assets/css/reset.css）容易因模块解析上下文出错 - 不要在该 CSS 文件里写任何带选择器的规则（如
.my-btn { }），否则会被 PurgeCSS 误判为“未使用”而删掉（尤其 Tailwind 项目） - 如果用的是 Vite，确认
reset.css没被css.preprocessorOptions错误接管（它只处理lang="scss"等预处理器文件）
@import 在 App.vue 的 <style> 标签里会失效或泄漏
很多人图省事把全局样式写在 App.vue 的 <style> 里用 @import，但这有严重隐患：
- 即使加了
scoped，@import进来的 CSS 仍会全局生效（Vue 不会隔离外部导入的样式） - 没加
scoped更危险：所有组件都继承这些样式，且无法被子组件scoped阻断 - Vite 和 Webpack 对
@import的解析顺序不稳定，某些动态 import 场景下可能延迟加载，导致首屏闪动 - 构建时，这类
@import不参与 PostCSS 插件链（比如 Autoprefixer、Tailwind 的 utilities 扫描），容易丢失 vendor prefix 或工具类
index.html 中 link 引入适合 CDN 资源，但不推荐用于本地 CSS
直接在 public/index.html 的 <head> 里加 <link rel="stylesheet"> 是可行的，但仅限于：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 第三方 CDN 资源（如 Font Awesome、Google Fonts）
- 需要绕过构建流程的静态资源（比如某些 UI 库的完整 CSS 包）
- 你明确接受它无法被 HMR（热更新）监听、无法压缩、无法 Tree-shaking
⚠️ 本地 CSS 文件绝不要走这条路：它会脱离构建系统，无法参与 PostCSS 处理、无法被 Vite 的 css.codeSplitting 优化，且开发时修改不会触发重载。
Tailwind 用户特别注意：@tailwind 指令必须共存于同一文件
如果你引入的是 Tailwind，@tailwind base、@tailwind components、@tailwind utilities 三者缺一不可，且必须在同一 CSS 文件中、顺序不能调换。
- 错误做法：
main.js里分别import './base.css'和import './utilities.css'→ 后者完全无效 - 正确入口文件（如
src/assets/tailwind.css）只能是这三行，且不能混任何其他 CSS 规则 - 这个文件必须被
main.js唯一 import，不能通过@import嵌套或index.html引入，否则 PostCSS 插件无法完整解析 - content 配置漏路径，
@tailwind utilities就像没写一样——哪怕文件存在、import 正确，也会生成空的 utility 类
真正卡住多数人的不是安装步骤，而是 @tailwind utilities 因 content 配置不全或动态 class 未进 safelist，在 build 后彻底消失——它不报错，只静默失效。
