必须同时启用 prefix、important: true 和关闭 preflight，三者缺一不可；因构建工具重排CSS、选择器权重相同导致覆盖，需加前缀、改类名、禁用Bootstrap utilities并补基础重置。
必须同时启用 prefix、important: true 和关闭 preflight，三者缺一不可；只调换 CSS 加载顺序或只加 !important 都会漏掉关键冲突点。
为什么单纯把 Tailwind 放在 Bootstrap 后面不管用
现代构建工具（Vite/Webpack）会重排、合并、压缩 CSS，你写的 import 顺序 ≠ 最终浏览器解析顺序。即使 HTML 中 <link> 位置正确，也挡不住 PostCSS 插件对选择器权重的重算。更麻烦的是：Bootstrap 的 .rounded 和 Tailwind 的 rounded-lg 都是单类选择器，权重相同，谁在最终 CSS 文件里物理位置靠后，谁就赢——这根本不可控。
常见现象包括：bg-blue-500 完全不生效、flex 被 .d-flex 覆盖、hover:bg-gray-100 在按钮上没反应——不是写错了，是类名被另一个框架悄悄劫持了。
tailwind.config.js 必须做的三件事
这三项配置必须一起开，否则任一缺失都会导致部分样式失效：
-
prefix: 'tw-'—— 注意末尾短横线不能少，'tw'会生成非法类名如twtext-red-500 -
important: true—— 是布尔值true，不是字符串"true"；它让所有带tw-前缀的类自动带上!important -
corePlugins: { preflight: false }——@tailwind base里的重置规则（比如button { background: transparent }）和 Bootstrap 的reboot冲突，且important: true对这类标签选择器完全无效
HTML/JSX 和 Bootstrap 端要同步改
配置只是第一步，代码层不跟上等于白配：
- 所有 HTML/JSX 中的 Tailwind 类必须手动加前缀：
class="flex p-4 text-center"→class="tw-flex tw-p-4 tw-text-center" - 动态拼接类名时也要带前缀：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`，漏掉一个就丢样式 - Bootstrap 端要禁用
utilities模块，只保留reboot、type、grid；SCSS 导入必须显式控制，不能@import "bootstrap"一把梭 - 如果还用 Bootstrap 的
.btn、.card，建议统一加项目前缀，比如acme-btn，避免和全局类直接撞车
关掉 preflight 后别忘了补基础重置
关掉 preflight 不是放任不管，而是把控制权拿回来。至少补这几条：
@layer base {
* {
box-sizing: border-box;
}
button {
appearance: none;
}
img {
max-width: 100%;
height: auto;
}
}否则原生 <button></button> 可能变透明、<img alt="怎么解决Bootstrap和Tailwind共存冲突" > 溢出容器——这不是类名冲突，是基础渲染逻辑断层，配置再全也救不了。
