Tailwind CSS打包体积失控主因是content字段漏配或路径错误，导致JIT退化为全量输出（3–5 MB）；正确配置content路径并启用生产构建后，体积可压至30–80 KB（gzip前），远小于未裁剪状态。
Tailwind CSS 的打包体积比 Bootstrap 小，但前提是正确配置 content；否则默认 Tailwind 可能生成 3 MB+ 的 CSS，而 Bootstrap 默认 gzip 后约 20–25 KB —— 这不是框架本身的问题，是配置误用。
tailwind.config.js 的 content 字段漏配或路径错误
这是导致 Tailwind 体积失控的最常见原因。未配置或路径不全时，JIT 引擎无法识别哪些类被实际使用，于是保留全部 utility 类（超 5000 个），最终 CSS 文件可达 3–5 MB（未压缩）。
- 错误写法：
content: ["./public/**/*.html"]→ 忽略了.tsx、.js中的类名，样式丢失且体积仍巨大 - 正确写法：
content: ["./src/**/*.{js,jsx,ts,tsx,html}"]→ 覆盖主流模板与组件文件 - 若用 Vite + React，还需加入
vite.config.ts中的resolve.alias对应路径，否则别名导入的组件可能被漏扫 - 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify后检查输出文件大小：合理配置下应 ≤ 10 KB（gzip 前通常 30–80 KB）
Bootstrap 的体积固定但可手动裁剪
Bootstrap 没有自动 purge 机制，体积取决于你“怎么引入”，而非“怎么写 HTML”。它默认打包全部组件，哪怕只用一个 btn 类，bootstrap.min.css 也含 carousel、tooltip、dropdown 等无关样式。
- 全量引入（CDN 或
import 'bootstrap/dist/css/bootstrap.min.css'）→ gzip 后 ~22 KB，但未压缩 CSS 约 180 KB - SCSS 按需导入（推荐）：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities";→ 可压到 gzip 后 ~8 KB - 禁用 JS 但保留 data-bs-* 属性？不行 ——
bootstrap.bundle.js初始化时会扫描整个 DOM，没 JS 就没交互，且 CSS 里那些.dropdown-menu伪类规则依然存在，白占体积
gzip 后体积 ≠ 渲染性能，首屏关键 CSS 提取才是重点
Google PageSpeed 把首屏 CSS 体积列为 LCP 核心因子，差 50 KB 在低端安卓机上可能多出近 1 秒渲染延迟。Tailwind 更容易做关键 CSS 提取，Bootstrap 则难拆解。
- Tailwind：可用
@layer base+@apply抽出首页必需样式，配合插件（如rollup-plugin-critical）单独内联 - Bootstrap：栅格（
.container、.row）、工具类（.d-none、.text-center）和组件样式深度耦合，无法安全剔除某一块而不破布局 - 两者若都通过
同步加载，都会阻塞渲染；但 Tailwind 的原子性让按路由/页面拆包更自然，比如 Next.js 中用dynamic+loadable控制 CSS 加载时机
构建过程中的热更新与增量编译差异
开发体验直接影响长期性能感知。Tailwind 的 JIT 编译在现代工具链中几乎无感，Bootstrap 的 SCSS 重建则常卡顿。
- Tailwind（v3.0+ JIT）：改一个
md:hover:scale-105，Vite 仅重生成该类，热更新耗时 - Bootstrap（Sass）：改一个变量（如
$primary），触发全量 SCSS 编译，尤其嵌套@import多层时，常需 300–800 ms - 注意：Tailwind 首次启动 JIT 编译略慢（因扫描所有 content 文件），但后续编辑完全不卡；旧版 AOT 模式反而更拖慢
真正决定性能的从来不是“框架叫什么”，而是你有没有让构建系统知道“哪些样式真正在用”。Tailwind 给你开关，Bootstrap 给你说明书——但开关不拨，说明书再厚也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
