必须组合配置prefix: 'tw-'、important: true和corePlugins.preflight: false，才能彻底解决Tailwind与Bootstrap等框架的样式冲突——前缀避让类名重复，!important提升权重压制同级规则，关闭preflight恢复原生元素默认样式。
直接加 prefix 不能解决样式覆盖问题，但能彻底避开类名字符串冲突；真正让 Tailwind 样式生效的关键是控制权重和重置干扰——important: true 和 corePlugins.preflight: false 往往比调整加载顺序更可靠。
为什么 Bootstrap 和 Tailwind 的 container、flex、text-center 会打架
两者都用全局类名，且默认 CSS 权重几乎一致。谁的规则后解析、谁的选择器更具体，谁就赢——这不是稳定行为。比如：
-
bg-blue-500失效，但bg-primary（Bootstrap）还在，说明 Tailwind 工具类被覆盖 -
flex不起作用，而.d-flex生效，说明 Bootstrap 的 display 规则压过了 Tailwind -
rounded-lg被截断成圆角很小，是因为 Bootstrap 的.rounded（无参数）带了border-radius: .25rem，且未被 Tailwind 覆盖
必须改的三项配置：prefix、important、preflight
光调顺序或删 Bootstrap 工具类只是治标。这三项在 tailwind.config.js 中缺一不可：
-
prefix: 'tw-'：让所有 Tailwind 类变成tw-flex、tw-p-4，从根源上避开字符串重复（注意末尾必须是短横线，不能写成'tw'或'tw- '） -
important: true：让每个 Tailwind 工具类自动带上!important，压制 Bootstrap 同权重规则（必须是布尔值true，不是字符串"true"） -
corePlugins: { preflight: false }：关闭 Tailwind 的@tailwind base，否则它会把button设为透明背景，导致按钮“消失”，这个跟类名无关，important: true完全无效
HTML 和 JS 里不改类名，前缀就等于白配
prefix 不是魔法开关，Tailwind 不会扫描或重写你的模板。你写了什么，浏览器就找什么：
立即学习“前端免费学习笔记（深入）”；
-
class="flex p-4 text-lg"→ 必须手动改成class="tw-flex tw-p-4 tw-text-lg" - JSX 中
className={`hidden ${isOpen ? 'block' : ''}`}→ 改成className={`tw-hidden ${isOpen ? 'tw-block' : ''}`} - 用了
clsx或twMerge？传进去的也得是带tw-的字符串，否则合并结果还是旧类名，浏览器找不到 - 漏改一处，那一处的 Tailwind 样式就彻底失效——不是 bug，是 prefix 的设计契约：你负责命名，Tailwind 负责生成
别碰 @layer base 重置，除非你清楚每条规则的副作用
网上有方案建议用 @layer base 覆盖 Bootstrap 的基础样式，例如强行设 html { font-size: 16px }。这看似可控，实则危险：
- Bootstrap 的
reboot.css包含大量针对表单控件、图片、列表的修复逻辑，删掉或覆盖可能引发隐藏布局问题 - Tailwind 的
@layer base插入点在构建时固定，若与 Bootstrap CSS 加载顺序不匹配，反而加剧不确定性 - 真正该禁用的只有 Bootstrap 的工具类模块（如
utilities），保留reboot和grid更安全
最易被忽略的是 preflight 关闭后，原生元素回归浏览器默认样式——这意味着你得自己补 button 的背景、img 的垂直对齐、a 的下划线等。这些不是“额外工作”，而是隔离代价的一部分。
