text-center和container互相覆盖是因为Bootstrap 5与Tailwind的通用类名全局冲突且CSS权重相近，最终生效取决于规则位置与选择器特异性；需通过启用tw-前缀、设置important: true、禁用preflight及Bootstrap工具类模块来彻底解决。
为什么text-center和container会互相覆盖
因为Bootstrap 5和Tailwind都定义了text-center、container、flex这类通用类名，且默认都在全局作用域生效。它们的CSS权重几乎一致，谁的样式规则在最终CSS文件里位置靠后、选择器更具体，谁就赢——这不是可控行为。比如bg-blue-500失效，但bg-primary还有效；rounded-lg被Bootstrap的.rounded截断；flex被.d-flex覆盖。
直接改加载顺序根本不管用
把Tailwind CSS放在Bootstrap后面，只能解决部分问题，而且极不可靠。现代构建工具（Vite/Webpack）会合并、重排CSS，你写的import顺序 ≠ 最终顺序。必须检查浏览器开发者工具的Network面板，确认最终HTML中<link>标签的实际顺序；CDN场景下，也得手动确保Tailwind的<link>在Bootstrap之后，且没加async或defer。
真正有效的三步实操配置
只靠“谁后加载”或“加!important”都不完整，必须组合动作：
- 在
tailwind.config.js顶层启用prefix: 'tw-'，让所有Tailwind类名变成tw-flex、tw-p-4——这一步解决字符串撞名，但所有HTML/JSX里的class属性必须手动改，漏一处就丢样式 - 同时设
important: true（注意是布尔值true，不是字符串"true"），让这些带前缀的类自带!important，压制Bootstrap的同权重规则 - 关掉Tailwind的
preflight：在corePlugins里配preflight: false，否则@tailwind base会重置button等原生标签样式，导致按钮变透明——这个跟类名无关，important: true完全无效
别忘了禁用Bootstrap的工具类模块
Bootstrap 5的utilities模块（含.text-center、.d-flex等）和Tailwind功能高度重叠，留着就是冲突源。应该只保留reboot、type、grid这些基础层，在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";
复杂点在于：前缀和important要同步生效，preflight关闭后需自行补基础重置，而Bootstrap网格结构与Tailwind样式混用时，仍需避免在同一个元素上同时写row和tw-grid——这不是配置能兜住的，得靠人盯代码。
