Tailwind CSS凭借tailwind.config.js配置、JIT按需编译和工具类组合，在开发效率、体积控制与响应式灵活性上显著优于Bootstrap；其支持任意值样式、全变体开箱即用、可预测类名及原生RTL支持，大幅降低维护成本。
现代前端不是“偏爱”Tailwind CSS，而是当项目需要快速迭代、设计语言统一、构建可控时，tailwind.config.js + JIT 编译 + 工具类组合的链路，在开发效率和维护成本上确实压倒了 Bootstrap 的预设组件模式。
tailwind.config.js 配置决定样式边界，bootstrap.css 体积决定加载负担
Bootstrap 默认打包全部组件（button、modal、carousel 等），哪怕你只用一个 btn 类，整个 bootstrap.css 仍会注入约 200KB（未压缩）；而 Tailwind 的 content 字段明确限定扫描范围，配合 JIT 模式，最终 CSS 文件常低于 10KB —— 这不是“更小”，是“只生成你写的类”。
常见错误现象：
- 在
tailwind.config.js中漏写./src/**/*.{js,ts,jsx,tsx}，导致新写的类名不生效 - 误将
content设为["./public/**/*.html"]，但实际组件在.tsx里，结果样式全丢 - Bootstrap 项目中删掉
bootstrap.bundle.js后，data-bs-toggle行为消失却查不到报错 —— 因为它依赖 JS 初始化，不是纯 CSS
hover:active:focus-visible 叠加变体无需配置，bootstrap 需手动写 SCSS
Tailwind JIT 默认启用所有变体，hover:shadow-lg focus:outline-none active:scale-[0.98] 可直接连写；Bootstrap 要实现类似效果，得进 _buttons.scss 改源码，或额外写一段自定义 CSS 并确保它在 Bootstrap 样式后加载。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 表单控件需同时响应
focus-visible（键盘聚焦）和hover（鼠标悬停），Tailwind 一行搞定；Bootstrap 得靠 JS 切 class 或重写伪类选择器 -
disabled:opacity-50 disabled:cursor-not-allowed在按钮禁用态自动生效；Bootstrap 的.btn:disabled仅覆盖基础灰度，圆角/阴影等需额外补丁 - JIT 模式下
md:hover:scale-105这种“断点+交互”组合开箱即用；Bootstrap 响应式工具类（如d-md-block）不支持嵌套交互态
HTML 里写 top-[-113px] 就生效，bootstrap 得新建 class 或 inline style
Tailwind JIT 的方括号语法允许任意值：inset-x-[-2rem]、bg-[#165DFF]、shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)] —— 不用切文件、不污染全局、不绕过 PurgeCSS。Bootstrap 没这种能力，遇到非标准值只能：
- 在 HTML 里写
style="top: -113px"（破坏原子性，无法复用） - 在 SCSS 里新增
.mt-custom-113 { margin-top: -113px; }（增加维护成本，且 PurgeCSS 可能误删） - 用
!important强行覆盖（污染优先级，后续难调试）
性能影响：方括号语法生成的 CSS 是按需注入的，不会膨胀文件；而 Bootstrap 自定义 class 若没被 PurgeCSS 正确识别，就会留在生产包里吃带宽。
class 名堆到 30 个不是问题，问题是它是否可预测、可搜索、可 grep
有人抱怨 flex flex-col items-center justify-between w-full max-w-4xl p-4 md:p-6 lg:px-8 gap-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 太长 —— 但这串类名每个都对应明确语义，grep -r "justify-between" src/ 能立刻定位所有交叉轴对齐逻辑；而 Bootstrap 的 .d-flex .flex-column .justify-content-between 同样冗长，且命名层级混乱（d- 是 display，flex-column 是方向，justify-content-between 是对齐），搜索时还得猜前缀。
容易踩的坑：
- 把 Tailwind 当“类名速查表”用，不理解
px-4是padding-left + padding-right，结果在 RTL 环境下出错（Tailwind 有start-4/end-4支持，Bootstrap 没原生 RTL 工具类） - 在 Vue/React 组件里硬编码大量类名，却不抽成
classNameprop 或twMerge合并逻辑，导致条件类名拼接混乱 - 忽略
tailwindcss-config-viewer这类插件，靠手翻文档查text-xs对应多少 px，其实 VS Code 装了Tailwind CSS IntelliSense就能 hover 看值
真正卡住团队的从来不是类名长度，而是当设计师说“这个卡片阴影再深一点”，你得知道该改 shadow-md 还是 shadow-lg，或者直接上 shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)] —— Tailwind 把决策权交还给开发者，而不是锁死在几个预设档位里。
