必选项是prefix: 'tw-'，因其从字符串层面隔离类名（如flex→tw-flex），彻底避免与Bootstrap同名类（.d-flex、.text-center）碰撞；需配合important: true提升权重、corePlugins.preflight: false关闭重置、禁用Bootstrap utilities模块，并手动更新所有HTML/JSX中的类名。
直接混用 Bootstrap 5 和 Tailwind CSS 会导致 flex、text-center、container 等类名被彼此覆盖，这不是加载顺序能稳定解决的问题——必须改配置、动构建、手动同步类名。
为什么 tailwind.config.js 的 prefix: 'tw-' 是必选项
类名冲突本质是字符串重复，不是 CSS 权重问题。prefix: 'tw-' 让所有 Tailwind 工具类生成时自动加前缀，比如 flex → tw-flex，md:hidden → tw-md:hidden。这一步从源头切断和 Bootstrap 的同名类（如 .d-flex、.text-center）的碰撞。
注意三点：
-
prefix必须带末尾短横线：'tw-'✅，'tw'❌（会生成非法类名twtext-center） - HTML/JSX 中所有 class 属性必须手动更新，漏一个
flex就变成无样式布局 -
@apply生成的类会自动加前缀，但手写自定义类（如.my-btn）或第三方组件类（如.el-button）不受影响
important: true 不是可选，而是压制 Bootstrap 同权重规则的必要补充
仅加前缀还不够：Bootstrap 的 .d-flex 和 Tailwind 的 .tw-flex 权重几乎一致，浏览器仍可能按源码位置决定谁生效。important: true（布尔值，不是字符串）会让所有带 tw- 前缀的类自动带上 !important，强行压过 Bootstrap 的默认规则。
但要清楚代价：
- 后续用
!tw-text-sm这类手动优先级修饰符才有效，!text-sm会失效 - 它对
preflight无效——按钮透明、图片块级显示等问题照旧，因为那些是标签选择器，不走类名路径 - 遇到 Bootstrap 自身带
!important的类（如.fw-bold），胜负取决于具体选择器特异性，不是绝对赢
corePlugins.preflight: false 必须关，否则按钮变透明这类问题无解
Tailwind 的 @tailwind base 会注入 preflight 重置层，和 Bootstrap 的 reboot 功能高度重叠。比如 button { background: transparent } 这条规则会让所有按钮失去默认背景色，而 important: true 完全压不住它——因为这是元素选择器，不是类选择器。
在 tailwind.config.js 的 corePlugins 中显式关闭：
corePlugins: {
preflight: false
}
关掉后需自行补轻量 reset，例如：
@layer base {
* { box-sizing: border-box; }
html { font-size: 16px; }
button { background-color: initial; }
}
Bootstrap 的 utilities 模块必须禁用，否则冲突源还在
Bootstrap 5 的 utilities 模块（含 .text-center、.d-flex、.rounded）和 Tailwind 功能完全重叠，留着就是定时炸弹。你应该只保留基础模块：
- 导入时精简 SCSS：只引入
functions、variables、mixins、reboot、type、grid - 绝对不要
@import "bootstrap/scss/utilities"或@import "bootstrap/scss/helpers" - 如果项目中已用到 Bootstrap 的
.btn、.card等语义类，建议统一封装为带项目前缀的类（如.acme-btn），避免和 Tailwind 工具类混在同一 DOM 节点上
最麻烦的其实是动态拼接类名的场景——比如 className={`flex ${isOpen ? 'hidden' : ''}`，漏写 tw- 就等于没写；还有 content 配置若没扫到带 tw- 的模板字符串，对应类根本不会生成。这些地方容易被忽略，但一出问题就很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
