Tailwind CSS 和 Bootstrap 的选择取决于项目需求：Tailwind 适合需高度定制和长期维护的设计系统，Bootstrap 适合快速交付但交互依赖 JS。
Tailwind CSS 和 Bootstrap 不是“谁更好”，而是“谁更匹配你当前的约束条件”——关键在你是要快速拼出一个可用界面，还是长期维护一套可演进的设计系统。
tailwind.config.js 的 content 配置写错，所有类都不生效
Tailwind 的类名不是静态存在的，它靠扫描源码中出现的类名来生成对应 CSS。漏掉路径或后缀，就等于告诉构建工具：“这些文件里没样式，全删”。
- 常见错误：
content: ["./public/**/*.html"]，但实际组件在src/components/Button.tsx里 → 所有bg-blue-500、md:flex全部消失 - React + Vite 项目必须包含
tsx和jsx：content: ["./src/**/*.{js,jsx,ts,tsx,html}"] - 用了
@apply封装工具类？那.scss或.css文件也得进content列表，否则变体（如hover:、focus:）不会生成 - 未配置
content时，Tailwind 默认不 purge，打包出的 CSS 可能超 3 MB —— 这不是框架问题，是误用
bootstrap.css 体积固定，但删 JS 后 data-bs-* 行为直接失效
Bootstrap 的 CSS 和 JS 是解耦但强依赖的：类名负责样式，data-bs-toggle 这类属性靠 JS 初始化才能工作。禁用 JS 后，class="btn btn-primary" 仍有效，但 data-bs-toggle="modal" 就只是个无意义字符串。
- 常见现象：页面加载后模态框点不动，控制台无报错，
bootstrap.bundle.js被注释了却没人检查 - 想只用 CSS？可以，但需手动引入
bootstrap.min.css并确保不加载 JS；同时放弃所有交互组件（Tooltip、Dropdown、Collapse） - Bootstrap 的栅格（
row/col）和工具类（mt-3）是同一份 CSS，无法按需拆分 —— 想减体积只能靠 Sass partials 自定义 import，门槛高于 Tailwind 的content控制
hover:scale-105 md:hover:rotate-1 之类组合，在 Tailwind 是开箱即用，在 Bootstrap 得手写 SCSS
Tailwind JIT 模式默认支持任意断点 + 任意变体的嵌套组合；Bootstrap 的响应式工具类（如 d-md-block）不支持交互态，:hover 必须自己补 CSS，且容易被优先级或加载顺序搞乱。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
hover:shadow-lg focus-visible:ring-2 focus-visible:ring-blue-500—— 一行搞定键盘聚焦+鼠标悬停，无障碍友好 - Bootstrap 中实现等效效果，得在自定义 SCSS 里写：
.btn-primary:hover { box-shadow: ... } .btn-primary:focus-visible { outline: 2px solid ... }，还得确认它在 Bootstrap 样式表之后加载 - 任意值语法如
top-[-113px]、shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]在 Tailwind 中直接生效；Bootstrap 没这能力，只能 inline style 或新增 class
团队协作时，class 名语义 vs class 名组合逻辑的隐性成本
Bootstrap 的 card、list-group-item 是带语义的“名词”，新人一眼看懂结构；Tailwind 的 flex flex-col p-4 border rounded-lg 是“动词式描述”，需要团队对间距、圆角、阴影等设计 token 有共识。
- 没有统一规范时，
mr-2和ml-2可能混用，text-sm和text-[13px]同时存在，样式碎片化 - Bootstrap 强制命名收敛，适合外包、跨职能交付；Tailwind 要求先定
tailwind.config.js中的 spacing / borderRadius / boxShadow 等 scale，否则后期重构成本爆炸 - RTL 支持差异明显：
dir="rtl"下，Tailwind 的mr-4自动转成ml-4（需启用dir插件）；Bootstrap 需额外引入bootstrap.rtl.css，且部分组件（如 input group）翻转逻辑不完整
真正卡住项目的往往不是“选哪个框架”，而是没在第一天就明确：谁改样式、改多频繁、是否要支持暗色模式/RTL/无障碍焦点管理——这些决定了你是该抄作业，还是该搭地基。
