体积与性能对比
把常见方案的体积和特性放在一起看（gzip 后的量级参考，具体取决于使用程度）：Bootstrap 全量约 30KB、按需编译 10~20KB、Tailwind purge 后约 10KB、手写 CSS 理论最小但维护成本最高。看起来差距不大，是因为 CSS 本身传输体积普遍偏小，压缩后更是如此。
所以性能的真正关注点不在「框架 vs 手写」，而在：渲染阻塞——CSS 的 <link> 在 head 里会阻塞首屏渲染，体积大的框架要考虑关键 CSS 内联；JS 体积——bootstrap.bundle.js 连带 Popper，不用 JS 组件就别引；样式稳定性——框架类名经过千锤百炼，反而比团队手写 CSS 更少出现布局抖动。
结论：首屏性能不是选 CSS 框架的主要考虑因素，除非做到极致优化。开发效率与一致性才是框架的核心价值，别为省 10KB 牺牲团队三个月的维护效率。
本节要点体积：Bootstrap 全量~30KB、Tailwind purge 后~10KB，差距经 gzip 后有限；性能瓶颈在渲染阻塞与多余 JS，框架的真正价值是效率与一致性。
代码
// 体积粗略对比（gzip 后，量级参考）
// ┌─────────────────────┬───────────┬───────────────────┐
// │ 方案 │ 体积 │ 说明 │
// ├─────────────────────┼───────────┼───────────────────┤
// │ Bootstrap 全量 │ ~30KB │ 未用的组件也打包 │
// │ Bootstrap 按需编译 │ 10~20KB │ 需配 Sass 流程 │
// │ Tailwind(purge 后) │ ~10KB │ 只含实际用到的类 │
// │ 手写 CSS │ 最小 │ 重复劳动+难维护 │
// └─────────────────────┴───────────┴───────────────────┘
// 性能真正要盯的三个点：
// 1. CSS <link> 阻塞首屏渲染 → 关键 CSS 内联/预加载
// 2. 用不到 JS 组件就别引 bootstrap.bundle.js（含 Popper）
// 3. 样式一致性减少布局抖动 → 框架反而加分
// 结论：CSS 体积很少成为瓶颈，
// 开发效率与团队一致性才是选框架的理由📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读