必须组合配置prefix: 'tw-'、important: true和corePlugins.preflight: false，才能彻底解决Tailwind与Bootstrap等框架的样式冲突——前缀避让类名重复，!important提升权重压制同级规则，关闭preflight恢复原生元素默认样式。
Tailwind CSS 与其他 CSS 框架（如 Bootstrap、Bulma、Foundation）混用时，text-center、container、flex 这类通用类名会直接撞车，最终谁生效取决于构建后 CSS 的顺序和选择器特异性——这不是可控行为，必须靠配置干预，不能靠“调换 import 顺序”糊弄过去。
为什么 text-center 和 container 会互相覆盖
Bootstrap 5 和 Tailwind 都在全局定义了这些基础工具类，且默认权重几乎一致：.text-center（Bootstrap）和 text-center（Tailwind）本质是两个独立规则，浏览器按最终生成的 CSS 文件里谁的位置靠后、谁的选择器更具体来决定渲染结果。常见现象包括：
-
bg-blue-500失效，但bg-primary（Bootstrap 自定义色）仍有效 -
rounded-lg被 Bootstrap 的.rounded截断（后者没设圆角值，重置为 0） -
flex被.d-flex覆盖，导致响应式布局错乱
启用 prefix 并设 important: true
这是解决撞名问题最直接的组合动作，缺一不可：
- 在
tailwind.config.js顶层加prefix: 'tw-'，所有类名自动变成tw-flex、tw-p-4等，从字符串层面隔开 - 同时设
important: true（注意是布尔值true，不是字符串），让带前缀的类自带!important，压制 Bootstrap 同权重规则 - HTML/JSX 中所有
class属性必须同步手动替换，漏一处就丢样式；可用 IDE 全局搜索class="+ 正则批量替换，但需人工校验
关掉 preflight 并禁用 Bootstrap 工具类模块
preflight 是 Tailwind 的基础重置层，和 Bootstrap 的 reboot 功能重叠；不关掉会导致按钮透明、表单控件样式异常——important: true 对这类重置完全无效：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的corePlugins中配preflight: false - Bootstrap 端要精简导入：只保留
reboot、type、grid，删掉utilities模块（它提供.text-center、.d-flex等冲突源） - SCSS 中显式控制导入顺序，例如：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/grid";
注意：关掉 preflight 后，需自行补少量基础重置（如 button { appearance: none; }），否则原生按钮可能失真。
同一个元素上别混用框架网格类
配置再完善也兜不住人为错误：比如在同一个 <div> 上同时写 class="row tw-grid"，或 col-6 tw-w-1/2。Tailwind 的 tw-grid 和 Bootstrap 的 row 基于完全不同布局模型，叠加后行为不可预测。
真正麻烦的点不在配置，而在协作边界——前端工程师得明确约定：组件内只用一种框架的布局系统，CSS 类名不跨框架混搭；否则哪怕 prefix 和 important 都开了，也会在某个深夜发现某个卡片突然左对齐失效。
