项目选CSS框架需先确认三点：团队熟悉度、是否需快速出原型、设计系统是否固定或需高度定制；Tailwind适合改得快但HTML膨胀，Bootstrap适合快速交付管理后台但定制难。
项目要不要用 CSS 框架，先看这三点
不用框架也能写样式，但选错框架反而拖慢开发、增加维护成本。关键不是“哪个更好”，而是“哪个更不碍事”。判断前先确认：团队是否熟悉该框架、项目是否需要快速出原型、设计系统是否已固定（或必须高度定制）。如果 UI 需求简单且设计师给的是像素级标注，Tailwind 可能比 Bootstrap 更轻；如果后端主导、前端人手少、还要兼容 IE11，Bootstrap 4 的 float 布局反而更稳。
Tailwind 的 utility-first 不是写得快，是改得快
它不提供预设组件，只暴露原子类（如 text-lg、bg-blue-500、md:flex）。好处是：样式逻辑全在 HTML，改按钮颜色不用切到 CSS 文件；响应式断点内联，视觉反馈即时。但代价明显：HTML 明显膨胀、新手易滥用组合类导致语义混乱、purgeCSS 配置失误会误删生产环境样式。常见错误包括在 JSX 中写 class="w-1/2 w-full md:w-1/3" 却没理清断点覆盖顺序，结果移动端反而用了 w-full —— Tailwind 的类名没有优先级，纯靠顺序覆盖。
Bootstrap 的 class 名是文档，也是枷锁
btn btn-primary btn-sm 看似直观，实际隐含三层耦合：语义（按钮）、状态（主色）、尺寸（小号）。一旦设计要求“主色按钮在卡片内必须变圆角且禁用阴影”，你就得：覆盖 、btn-primary 的 border-radius 和 box-shadow加新 class 如 、btn-card-primary 并维护两套逻辑或干脆弃用 。它的栅格（btn 改手写 CSScol-md-6）在 Flexbox 成为主流后显得冗余；而 JS 组件（modal、dropdown）又常因事件绑定冲突与 React/Vue 生态打架。不过，若项目需快速交付管理后台且不追求视觉差异，Bootstrap 5 的 data-bs-* 属性 + 无 jQuery 依赖，仍是最省心的“开箱即用”方案。
别忽略“没被列进对比表”的真实成本
框架选型最易被跳过的环节，是构建链路适配。比如 Tailwind 要求你配置 content 字段指定扫描路径，漏掉 src/pages/**/*.{js,ts,jsx,tsx} 就会导致动态生成的 class 被 purge 掉；Bootstrap 5 默认用 Sass，但若项目用 PostCSS，就得手动解构 _variables.scss 并重写颜色映射。还有团队协作：设计师是否愿意查 text-gray-700 对应什么灰度？后端模板工程师能否接受 class="d-flex justify-content-between" 这种写法？这些不是技术问题，是信息流转的摩擦点。
立即学习“前端免费学习笔记（深入）”；
