Tailwind CSS 与 Bootstrap 类名冲突的根本原因是同名工具类语义和实现不同，需通过 prefix 隔离类名并取舍 preflight 重置来解决。
为什么tailwindcss和bootstrap会互相覆盖类名
因为两者都大量定义同名工具类，比如flex、container、text-center、rounded-lg，但语义和实现完全不同。Tailwind 的 container 是空壳，Bootstrap 的 .container 带 max-width 和 padding；rounded-lg 在 Tailwind 中是 0.5rem，Bootstrap 的 .rounded 是 0.25rem 且无层级区分。浏览器按选择器权重和源码顺序计算样式，而两者权重几乎一样，谁后加载、谁的规则更具体，谁就赢——这不是可控行为。
用prefix: 'tw-'彻底隔离类名字符串
这是唯一能从根源上避免命名碰撞的方式，不改权重、不碰预设、不依赖加载顺序。
-
tailwind.config.js顶层加prefix: 'tw-'（注意末尾短横线不能少，写成'tw'会生成非法类名如twtext-red-500） - 所有 HTML/JSX 中的 Tailwind 类必须手动更新：
class="flex p-4 text-lg"→class="tw-flex tw-p-4 tw-text-lg" - 动态拼接类名时也要带前缀：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`，否则运行时找不到类 -
@apply生成的类会自动加前缀，但手写的自定义类（如.my-btn）、第三方组件类（如.el-button）完全不受影响 - 它不解决
@tailwind base引入的 preflight 重置（比如button { background: transparent }），那得单独关掉corePlugins.preflight: false
别乱开important: true，除非你清楚代价
开启后所有 Tailwind 工具类自动带上 !important，确实能压过 Bootstrap 大部分规则，但代价明显：
- 后续用
!text-sm这类手动优先级修饰符会失效（得写!tw-text-sm才有效） - 它对 preflight 规则无效——按钮透明、图片默认块级显示等问题照旧，因为那些是标签选择器，不走类名路径
- 和 Bootstrap 自身带
!important的类（如.fw-bold）相遇时，谁赢取决于源码位置，不可控 - 容易掩盖更深层问题：类名冲突本质是字符串重复，不是加载顺序或权重问题
preflight 冲突必须单独处理
Tailwind 的 @tailwind base 和 Bootstrap 的 reboot 都重置了 button、img、h1 等原生元素样式，但逻辑不同。两者共存时，常出现按钮无背景、图片不居中、标题字体崩坏等现象。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法是禁用 Tailwind 的 preflight：
corePlugins: { preflight: false }，保留 Bootstrap 的reboot - 若想保留 Tailwind 的基础重置，需在
@layer base中手动覆盖关键继承属性，例如：@layer base { * { box-sizing: border-box; } html { font-size: 16px; } } - 不要指望靠调整 CSS 加载顺序来“让 Tailwind 覆盖 Bootstrap”，因为 preflight 是全局标签选择器，权重固定，顺序无法改变根本结果
真正麻烦的不是 class 写不对，而是 class 名字被另一个框架悄悄截胡了——比如 bg-blue-500 没生效，不是你漏写了，是它被 Bootstrap 的同名类或更高权重规则覆盖了；hover:bg-gray-100 不触发，往往是因为父容器的 .btn 类里写了 pointer-events: none 或其他干扰逻辑。前缀隔离 + preflight 取舍，才是可维护的解法。
