Bootstrap在初级项目中效率更高，因其CDN引入即用、预置完整交互与无障碍属性，三日内可交付后台页、落地页或官网首页；Tailwind则需手动拼类、配置复杂，在低密度使用场景下反增认知负担。
Bootstrap 在初级项目实战中效率更高，尤其当目标是三天内交付一个可用的后台管理页、活动落地页或企业官网首页时——它不需要你理解“为什么md:flex要写在flex后面”，也不用查tailwind.config.js里漏了哪个文件后缀。
刚写完第一个HTML就想点开看到按钮变色，选Bootstrap
你只需要引入 CDN，写一行：<button class="btn btn-primary">提交</button>
就能获得带悬停、禁用、焦点反馈、圆角、阴影、字体大小和行高的一体化按钮。背后所有伪类、状态切换、无障碍属性（aria-pressed、role="button"）都已预置妥当。
而用 Tailwind，同样效果得手动拼：<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">提交</button>
初学者容易漏掉 focus: 或写错 disabled: 顺序，导致键盘用户无法操作，或禁用态没灰度变化。
- 常见错误现象：
hover:bg-blue-700写了但没生效 → 实际是因为没启用 JIT 模式，或tailwind.config.js的content路径没覆盖到这个 HTML 文件 - 使用场景：静态单页、学校作业、外包快速交付原型 —— 这些场景里，“能跑”比“可维护”优先级高得多
- 性能影响：CDN 引入
bootstrap.min.css（gzip 后 ~22 KB）加载快、解析稳；而本地 Tailwind 若content配错，打包出 3 MB CSS，首屏白屏风险反而更大
Tailwind 在初级项目里反而拖慢进度的典型情况
不是框架不行，而是它的优势需要一定使用密度才能兑现。比如：
- 你只写了 3 个页面，每个页面就 2 个按钮、1 个卡片 ——
@apply封装、theme扩展、响应式断点组合全用不上，纯属增加认知负担 - 想让某个按钮上下边距是
1.75rem，Bootstrap直接用my-7（$spacers[7] === 1.75rem），Tailwind默认没有my-7，得去改theme.spacing或硬写my-[1.75rem]—— 初学者根本不知道方括号语法存在 - 团队里有人写
ml-4，有人写pl-4，没人统一“左边距该用 margin 还是 padding”，两周后样式开始碎片化，返工成本高于初期多敲几行
什么时候该换到Tailwind？看这三件事是否已发生
不是按“学完教程”切换，而是按实际协作信号判断：
立即学习“前端免费学习笔记（深入）”；
- 你开始反复复制粘贴同一段
class="flex items-center justify-between p-4 bg-gray-50 rounded-lg shadow-sm"—— 这说明原子组合已形成肌肉记忆，@apply提取就顺理成章 - 设计稿里出现非标准尺寸（比如顶部导航栏高
72px、卡片圆角14px），Bootstrap的$border-radius和$spacer变量改起来要重编译、清缓存、再验证，而Tailwind的rounded-[14px]和h-[72px]一行搞定 - 项目里已有多个
data-bs-toggle组件，但每次加新交互都要翻 Bootstrap 文档查 JS 初始化方式，而你更习惯用useState+useEffect控制显隐 —— 此时Tailwind的零 JS 依赖反而成了轻量锚点
Bootstrap 把前 80% 的重复劳动封进类名里，Tailwind 把后 20% 的精细控制权交还给你——选哪个，取决于你现在站在哪一段。 
