选Tailwind还是Bootstrap取决于项目样式修改主体、频率与深度：Bootstrap适合设计定死、需快速交付的管理后台，开箱即用但微调成本高；Tailwind适合设计系统明确、需长期演进的SaaS项目，原子化灵活但依赖精准配置。
选 Tailwind 还是 Bootstrap，不取决于“哪个更新潮”，而取决于你项目里谁在改样式、改得多频繁、改到什么程度。
项目刚启动且设计稿已定死，Bootstrap 5 的 btn 和 modal 能直接抄作业
如果你在两周内要交付一个内部管理后台，Figma 里按钮圆角是 4px、阴影是 box-shadow: 0 1px 2px rgba(0,0,0,0.1)、所有卡片统一用 border-gray-200，那 Bootstrap 5 的预设类几乎开箱即用：
-
btn btn-primary+form-control+table-striped组合就能覆盖 80% 基础控件 - 栅格系统
col-md-6/row g-3对响应式布局有明确断点语义，不用自己算min-width - JavaScript 组件如
data-bs-toggle="tooltip"只需加属性，不用手写addEventListener
但要注意：一旦设计开始微调（比如把所有 btn-primary 的背景从 #0d6efd 换成 #165DFF），你就得进 _variables.scss 改变量、重编译、再全局检查是否漏掉某个覆盖样式——尤其是暗色模式下 btn-outline-secondary 的边框色可能没同步变。
Tailwind CSS 的 content 配置写错，新写的 text-orange-600 就是不生效
Tailwind 不是“装完就跑”，它的体积优势和类名可用性完全依赖 tailwind.config.js 里的 content 字段。常见失效场景：
- 你在
src/components/Button.tsx里写了class="bg-[#165DFF] text-white"，但content只写了["./public/**/*.html"]→ 类被 PurgeCSS 当作未使用删掉了 - 项目用 Vite + React，但
content漏了tsx后缀：["./src/**/*.{js,ts}"]→ 所有 JSX 中的 utility 类全丢 - 用了
@apply封装类，但content没扫到对应的 SCSS 文件 →@apply flex items-center生效，但hover:scale-105不出现
正确写法必须覆盖所有模板来源：content: ["./src/**/*.{js,jsx,ts,tsx,html}"]。少一个后缀，就等于关掉一半 Tailwind 的能力。
需要支持 RTL、任意值或键盘焦点态时，Tailwind 的 dir="rtl" 和 focus-visible: 是硬通货
Bootstrap 对 RTL 的支持靠 dir="rtl" + 额外引入 bootstrap.rtl.css，但像表单控件的 text-align、图标翻转、甚至 margin-left 是否自动转成 margin-right，都得查文档确认是否内置。Tailwind 则原生打通：
-
dir="rtl"下，mr-4自动变成ml-4（需开启dir插件） -
focus-visible:ring-2 focus-visible:ring-blue-500可直接组合，不用管浏览器是否支持:focus-visible伪类 -
top-[-113px]或shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]这种非标准值，Tailwind JIT 模式下写完就生效；Bootstrap 只能切 SCSS 新增$spacers或写style属性
这类能力不是“锦上添花”，而是当你接到「适配阿拉伯语市场」或「满足 WCAG 2.1 键盘导航要求」需求时，能不能当天改完上线的关键。
团队里设计师和前端共用一套间距/颜色系统，Tailwind 的 theme.spacing 和 theme.colors 是对齐锚点
如果设计稿标注全是 8px 基数（8、16、24、32），而你用 Bootstrap 的 p-1～p-5（对应 0.25rem～1.25rem），每次换算都要心算：1rem = 16px → p-3 是 0.75rem = 12px，不对齐。Tailwind 允许你直接重定义：
module.exports = {
theme: {
spacing: {
'1': '8px',
'2': '16px',
'3': '24px',
'4': '32px',
}
}
}
这样 p-2 就是 16px，和 Figma 标注零误差。同理，品牌主色 primary 在 theme.colors 里定义一次，text-primary、bg-primary、border-primary 全局联动。Bootstrap 的变量体系虽也可改，但颜色类名（text-primary）和实际色值解耦，容易出现“改了 $primary 却忘了 .btn-primary:hover 的 background”这种漏网之鱼。
真正卡住项目的，往往不是“该不该用 Tailwind”，而是有没有人愿意花两小时配好 content、有没有人坚持把设计系统的数值映射进 tailwind.config.js、有没有人拒绝在 HTML 里写 style="margin-top: -113px;" —— 这些细节，比框架名字重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
