必须同时配置prefix、important: true和corePlugins.preflight: false，缺一不可；只调加载顺序或只加!important都会漏掉关键冲突点，因Bootstrap 5与Tailwind全局定义的text-center、flex、container等类名实现不同且权重相近，浏览器按CSS文件位置和选择器特异性决定生效规则，导致bg-blue-500失效、flex被.d-flex覆盖等现象。
必须同时配置 prefix、important: true 和 corePlugins.preflight: false，缺一不可；只调加载顺序或只加 !important 都会漏掉关键冲突点。
为什么 text-center、flex、container 会失效
Bootstrap 5 和 Tailwind 都在全局定义了这些类，但实现不同：.container 在 Bootstrap 中带 max-width 和 padding，Tailwind 的 container 默认是空壳；.rounded-lg 是 0.5rem，Bootstrap 的 .rounded 是 0.25rem 且无层级区分。浏览器按最终 CSS 文件里的位置和选择器特异性决定谁生效——这不是可控行为。
常见现象包括：bg-blue-500 完全不生效、flex 被 .d-flex 覆盖、hover:bg-gray-100 在按钮上没反应。这些不是写错了，是类名被另一个框架“截胡”了。
tailwind.config.js 必须改这三处
所有配置必须写在顶层对象中，写在 theme 或 plugins 里无效：
-
prefix: 'tw-'—— 注意末尾短横线不能少，prefix: 'tw'会生成非法类名如twtext-red-500 -
important: true—— 必须是布尔值true，不是字符串"true"，否则静默失效 -
corePlugins: { preflight: false }—— 关闭@tailwind base，否则按钮透明、图片块级显示等问题照旧，important: true对它完全无效
改完必须重启开发服务器（Vite/Webpack 不会自动重载 CSS 配置）。
HTML/JSX 里所有类名都要手动加前缀
Tailwind 不扫描也不改写你的模板，它只管生成哪些类。漏改一处，样式就丢：
-
class="flex p-4 text-lg"→ 改成class="tw-flex tw-p-4 tw-text-lg" - 动态拼接也要带前缀：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`，不能只写'hidden' -
@apply p-4 bg-red-500会自动转为tw-p-4 tw-bg-red-500，但手写的.my-btn、第三方组件类（如.el-button）完全不受影响 - 用
clsx或twMerge时，传进去的也必须是带前缀的类名，否则合并逻辑找不到对应规则
别忘了精简 Bootstrap 的导入
Bootstrap 的 utilities 模块（含 .text-center、.d-flex）和 Tailwind 功能高度重叠，留着就是冲突源。SCSS 中应只导入基础层：
@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";
关掉 preflight 后，需补少量基础重置，比如：button { appearance: none; }，否则原生按钮可能失真。前缀只解决字符串撞名，不处理标签选择器、伪类、第三方组件内部样式——这些都得单独面对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
