text-center和container互相覆盖是因为Bootstrap 5与Tailwind CSS均在全局定义同名通用类，CSS权重相近，后加载或更具体的选择器生效；需在tailwind.config.js中配置prefix: 'tw-'、important: true及corePlugins: { preflight: false }，并精简Bootstrap导入、重启开发服务器、同步更新HTML类名。
为什么text-center和container会互相覆盖
因为Bootstrap 5和Tailwind都定义了text-center、container、flex这类通用类名，且默认都在全局作用域生效。它们的CSS权重几乎一致，谁的样式规则在最终CSS文件里位置靠后、选择器更具体，谁就赢——这不是可控行为。比如bg-blue-500失效，但bg-primary还有效；rounded-lg被Bootstrap的.rounded截断；flex被.d-flex覆盖。
必须同时配置prefix、important和preflight: false
单一配置撑不住真实项目。要同时处理类名冲突、预检重置、动态类合并三类问题：
- 在
tailwind.config.js顶层加prefix: 'tw-'（注意末尾短横线不能少），所有工具类自动变成tw-flex、tw-p-4等，从字符串层面隔开 - 同时设
important: true（布尔值，不是字符串），让带前缀的类自带!important，压制Bootstrap同权重规则 - 关掉Tailwind的预检重置：
corePlugins: { preflight: false }，否则@tailwind base会把button变透明、input去边框——这个跟类名无关，important: true完全无效
别忘了精简Bootstrap的导入
Bootstrap的utilities模块（含.text-center、.d-flex等）和Tailwind功能高度重叠，留着就是冲突源。应该只保留基础层：
- SCSS中显式控制导入顺序，删掉
@import "bootstrap/scss/utilities" - 只保留
functions、variables、mixins、root、reboot、type、grid - 关掉
preflight后需补少量基础重置，例如button { appearance: none; }，否则原生按钮可能失真
改完配置必须重启开发服务器
Vite或Webpack dev server往往不会自动重载tailwind.config.js变更后的CSS生成逻辑。漏掉这步，prefix和important看似写了，实际没生效。HTML/JSX中所有class属性也必须同步手动替换，漏一处就丢样式——比如仍写class="p-4"，Tailwind根本不会匹配。
立即学习“前端免费学习笔记（深入）”；
