必须启用 prefix: 'tw-' 隔离 Tailwind 类名，同步修改所有 HTML/JSX 中的类名并加前缀，关闭 preflight 和 Bootstrap utilities 模块，手动补基础重置，禁用 important: true。
不能“同时使用”原样混用，必须做命名空间隔离和功能裁剪——否则 .text-center、.container、.flex 这类类名会互相覆盖，生效结果不可控。
必须启用 prefix: 'tw-' 隔离 Tailwind 类名
这是唯一从根源上切断冲突的方式。Tailwind 默认生成的 flex、md:hidden 会直接撞上 Bootstrap 的 .d-flex、.d-md-none，浏览器只看最终 CSS 文件里的顺序和选择器权重，谁赢纯属偶然。
- 在
tailwind.config.js顶层加prefix: 'tw-'（注意末尾短横线不能少） - 所有 HTML/JSX 中的 Tailwind 类必须同步改写：
class="p-4 text-center"→class="tw-p-4 tw-text-center" - 动态拼接也要带前缀：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`，漏一处就丢样式 -
@apply生成的类会自动加前缀，但手写自定义类（如.my-btn）或第三方组件类不受影响
关掉 preflight 并禁用 Bootstrap 的 utilities 模块
preflight 和 Bootstrap 的 reboot 都重置 button、input 等原生标签样式，两者叠加会导致按钮透明、表单控件失真——这不是类名冲突，important: true 完全无效。
- 在
tailwind.config.js的corePlugins中设preflight: false - Bootstrap 端要精简 SCSS 导入：只留
reboot、type、grid，删掉utilities（它提供.text-center、.d-flex等冲突源） - 关掉
preflight后需手动补少量基础重置，例如：button { appearance: none; }，否则原生按钮可能保留系统默认样式
别乱开 important: true，除非你清楚代价
它确实能压过 Bootstrap 大部分规则，但副作用明显，且解决不了根本问题。
- 开启后所有 Tailwind 类自动带
!important，导致后续用!tw-text-sm这类手动优先级修饰符才有效 - 对
preflight规则无效（因为是标签选择器，不走类名路径） - 和 Bootstrap 自身带
!important的类（如.fw-bold）相遇时，胜负难料 - 它掩盖了类名重复这个本质问题，容易让人误以为“调换加载顺序就能搞定”
真正麻烦的不是配置，而是混用时的边界意识：比如不要在一个元素上同时写 row（Bootstrap 网格容器）和 tw-grid（Tailwind 网格），这类组合无法靠配置兜住，得靠人盯住结构层和样式层的职责分离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
