必须同时配置 prefix、important: true 和 corePlugins.preflight: false，缺一不可；否则会出现按钮透明、动态类失效、类名覆盖等问题。
必须同时配置 prefix、important: true 和 corePlugins.preflight: false，缺一不可；只调加载顺序或只加 !important 会漏掉按钮透明、动态类失效等关键问题。
为什么 text-center 和 container 会互相覆盖
Bootstrap 5 和 Tailwind 都在全局定义了这些类，且默认权重几乎一致：.text-center（Bootstrap）和 text-center（Tailwind）是两条独立规则。浏览器按最终 CSS 文件中位置靠后、选择器更具体来决定生效结果——这不是可控行为。
常见现象包括：
-
bg-blue-500完全不生效，但bg-primary（Bootstrap 自定义色）仍有效 -
rounded-lg被 Bootstrap 的.rounded截断（后者圆角值为0.25rem，且无层级区分） -
flex被.d-flex覆盖，导致响应式布局错乱
在 tailwind.config.js 中启用 prefix: 'tw-'
这是从字符串层面隔离命名空间的唯一可靠方式。配置后所有 JIT 工具类自动带前缀，比如 text-red-500 → tw-text-red-500，md:hidden → tw-md:hidden。
容易踩的坑：
-
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，样式不生效 -
prefix: 'tw- '（末尾空格）→ 构建失败或行为异常 - 把
prefix写在theme或plugins里 → 完全不生效 -
@apply引用的工具类会自动加前缀，但手写的.my-btn、第三方组件类（如.el-button）、动态拼接的text-${color}-500不受影响
必须同步设 important: true 并关掉 preflight
important: true 让所有带前缀的类自带 !important，压制 Bootstrap 同权重规则；但它对 preflight 完全无效——因为 preflight 是标签选择器（如 button { background-color: transparent; }），不走类名路径。
所以必须配：
corePlugins: {
preflight: false
}
否则按钮变透明、表单控件失真等问题照旧。关掉后需手动补少量基础重置，例如：
@layer base {
button {
appearance: none;
}
}
注意：important: true 是布尔值 true，不是字符串 "true"；否则配置静默失效。
别忘了精简 Bootstrap 的导入
Bootstrap 的 utilities 模块（提供 .text-center、.d-flex 等）是主要冲突源，应禁用。只保留 reboot、type、grid 等基础层：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/grid";
HTML/JSX 中所有 class 属性必须手动更新：class="flex p-4" → class="tw-flex tw-p-4"；动态拼接也要带前缀：className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`。漏改任意一处，样式就丢失——这不是 bug，是 prefix 的设计前提：你主动隔离，就得全程负责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
