tailwind 与 bootstrap 颜色体系本质不同：前者是亮度阶梯原子类（如 red-50 到 red-900），后者是语义绑定变量（如 $danger），直接替换 class 会导致色调丢失、一致性破坏；迁移需同步配置 theme.extend.colors 并避免纯黑白基础色，深色模式处理逻辑也截然不同。
Tailwind 的 bg-red-500 和 Bootstrap 的 bg-danger 不是一回事
两者颜色语义和生成逻辑完全不同：Tailwind 是按亮度阶梯预设的原子类（red-50 到 red-900），Bootstrap 的 bg-danger 是语义绑定色，实际值由 $danger 变量决定，且默认不随主题变亮暗。直接替换会丢色调、失一致性。
- Bootstrap 的
bg-primary默认是#0d6efd，而 Tailwind 的bg-blue-500是#3b82f6，蓝调差异明显 - Tailwind 支持深色模式自动切换（如
dark:bg-gray-800），Bootstrap 5+ 虽支持data-bs-theme="dark"，但需手动重写所有背景/文字色类 - 若项目已用 Bootstrap 的 sass 变量定制过品牌色，迁移到 Tailwind 时不能只改 class 名，必须同步调整
theme.extend.colors配置
想复用现有 Bootstrap 色值？别硬抄 class，改 Tailwind 配置
直接把 bg-danger 换成 bg-red-500 是最常见翻车点——尤其当你的 $danger 已被改成紫红或橙红时。正确做法是让 Tailwind “认得”你的旧色值。
- 在
tailwind.config.js的theme.extend.colors下添加自定义键，比如：danger: '#e3342f', // 对齐 Bootstrap 默认 $danger - 之后就能用
bg-danger类，且它会参与亮度阶梯（bg-danger-100、bg-danger-700等自动可用） - 注意：Tailwind 的亮度阶梯基于 HSL 插值，对极亮（如
#ffffff）或极暗色（如#000000）生成效果可能发灰，建议避开纯黑白作基础色
颜色命名冲突：Bootstrap 的 text-muted 在 Tailwind 里没有直接对应
Tailwind 没有 text-muted 这个语义类，它的 text-gray-500 是固定亮度值，而 Bootstrap 的 text-muted 会随 $body-color 和 $body-bg 动态计算对比度。直接映射容易在深色模式下失效。
- 推荐方案：用 Tailwind 的
dark:text-gray-400+text-gray-500组合，而非找单个等价类 - 若需完全一致的“弱化文本”，应提取 Bootstrap 编译后的实际 css 值（如
color: rgba(0,0,0,.6)），再转为 Tailwind 的text-[rgba(0,0,0,0.6)]或自定义 color key - 警惕
text-secondary类——Bootstrap 中它常指中性灰，Tailwind 的text-gray-600更接近；但若项目重写了$secondary，仍需查实渲染后值
性能与体积：开一堆颜色变体真有必要？
Tailwind 默认生成全部 10 级亮度 + 所有基础色，哪怕你只用 blue-500 和 green-600，CSS 文件里也塞满了没用的 blue-50、indigo-900 等。Bootstrap 的 class 更克制，但扩展性差。
立即学习“前端免费学习笔记（深入）”；
- 用
content配置 +purge（v3.3+ 为content）能砍掉未使用的颜色类，但前提是模板里真没写bg-blue-100 - 如果团队习惯写
bg-[#3b82f6]这种任意色，务必关掉experimental.optimizeUniversalDefaults，否则可能误删 - Bootstrap 的 CSS 体积更小，但换肤要靠多套 CSS 文件或 JS 切换；Tailwind 单文件体积大，但深色模式切换零额外请求
Tailwind 和 Bootstrap 的颜色体系根本不是同一维度的东西——一个靠预设阶梯，一个靠语义变量。拿 class 名硬套，等于拿螺丝刀拧螺母。真正要动的是配置层和设计系统层，不是 HTML 里的 class 属性。