首屏变慢主因是未用css规则全量注入导致cssom构建阻塞。tailwind漏配content字段或bootstrap用cdn会加载冗余样式，使fcp超2s；需精准配置content、safelist或按需导入scss。
为什么 Tailwind/Bootstrap 的 class 列表会让首屏变慢
不是 class 多本身拖慢页面，而是未使用的 class 对应的 CSS 规则被全量注入了 ，导致浏览器必须下载、解析、构建完整的 CSSOM 才能开始渲染——哪怕你只用了 text-red-500 和 flex。
典型现象：Lighthouse “消除渲染阻塞资源” 评分低于 40，Network 面板显示 tailwind.css 或 bootstrap.min.css 占用 300ms+ 下载+解析时间，FCP（首次内容绘制）卡在 2s 以上。
- Tailwind 全量构建未裁剪时，CSS 文件可达 10MB（未压缩），即使 gzip 后仍超 300KB
- Bootstrap CDN 引入的
bootstrap.min.css包含所有组件规则，但你可能只用了container和btn - 框架 CSS 是
<link rel="stylesheet">，浏览器遇到即暂停 HTML 解析，无法流式渲染
content 字段漏配是 Tailwind 性能崩盘的主因
Tailwind JIT 模式靠 content 字段静态扫描模板中的 class 字面量，一旦路径没写全，它就“看不见”你写的 class，只能保守地保留全部规则。
常见漏配场景：
-
content: ["./index.html"]—— 完全忽略.tsx、.vue、.mdx中的 class - 没覆盖动态生成路径，如
src/pages/**/*.{js,ts,jsx,tsx}漏了.mdx - MDX 文件里用
{className: "bg-blue-200"}这种 props 写法，JIT 默认不分析对象属性值
验证方式：运行 npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify，检查输出文件大小。开发环境开 TAILWIND_MODE=watch 可避免热更新后样式丢失，但不解决漏配问题。
动态拼接 class 名会绕过 JIT 分析
像 className={`btn btn-${type} text-${color}`} 这类写法，Tailwind 无法在构建期确定 type 和 color 的具体值，直接跳过匹配，对应规则不会被保留——结果就是样式丢失，或你被迫把整个前缀加进 safelist，反而引入大量冗余。
更安全的做法：
- 显式列出所有可能值：
safelist: ["btn-primary", "btn-secondary", "text-red-500", "text-blue-500"] - 用正则兜底但限制范围：
safelist: [/^btn-/, /^text-(red|blue|green)-/] - 改用 CSS-in-JS 或 data 属性驱动样式，避开 class 拼接（例如用
data-variant="primary"+[data-variant="primary"] { … }）
Bootstrap 按需加载必须放弃 CDN 和 dist 文件
从 https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css 加载，等于主动放弃任何构建期优化。Webpack/Vite 根本无法分析、剔除、重写其中的规则。
真正按需的路径只有一条：
- 删掉所有
import 'bootstrap/dist/css/…' - 新建
src/scss/custom.scss，只@import真正需要的部分：bootstrap/scss/functions、variables、mixins、buttons、grid - 图标也按需导入：
import 'bootstrap-icons/icons/check.svg'，而非整包bootstrap-icons.css
最易被忽略的一点：CSS 选择器层级和 class 数量无关，但和「浏览器实际解析的 CSS 规则总量」强相关。哪怕你只写了 3 个 class，如果框架注入了 8000 条未使用规则，CSSOM 构建时间依然暴涨——优化永远要落在「最终产物」上，而不是源码里的 class 调用次数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
