根本原因是text-blue-500与.btn特异性相同（均为0,1,0,0），生效取决于加载顺序；稳解是组合：关闭preflight（修复button透明等基础重置）、启用prefix: 'tw-'（手动改所有类名避撞名）、配合twMerge（运行时合并冲突工具类）。
text-blue-500 和 .btn 都是特异性 0,1,0,0，谁的CSS文件后加载，谁就赢。靠改引入顺序硬刚非常脆弱，真正稳的解法是组合控制：前缀隔离 + 关闭预设重置 + 运行时合并。
为什么关掉 preflight 是第一步
很多“覆盖感”其实是 Tailwind 默认的 @tailwind base 在捣鬼：它把 button 设为 background-color: transparent，把 img 强制设为 display: block，直接破坏 Element Plus、Ant Design 或原生表单的渲染基础。这类规则不依赖类名，加前缀、调 import 顺序、套容器全无效。
- 必须在
tailwind.config.js中显式关闭：corePlugins: { preflight: false } - 改完必须重启开发服务器（Vite/Webpack HMR 不会重建这部分 CSS）
- 关掉后，若还需
box-sizing: border-box等基础行为，可手动在@layer base里补
prefix: 'tw-' 后所有类名都得手动改
开 prefix: 'tw-' 只是让 Tailwind 编译器生成 tw-p-4，但它不会自动扫描并替换你模板里的字符串。漏改一处，样式就“消失”——这不是 bug，是设计前提：你主动隔离，就得全程负责。
-
prefix必须写在配置顶层，且结尾短横线不能少：prefix: 'tw-'（'tw'会生成非法类名如twtext-red-500） - HTML/JSX 中所有
class="p-4"→ 改成class="tw-p-4"；className={`flex ${isOpen ? 'hidden' : ''}`→ 改成className={`tw-flex ${isOpen ? 'tw-hidden' : ''}` -
@apply写在 CSS 文件里会自动带前缀；但 JS/JSX 里拼的字符串不会
为什么 twMerge 是动态类拼接的刚需
写 className="tw-p-4 tw-p-2"，浏览器按最终 CSS 输出顺序取最后一个生效。但这个顺序受缓存、构建工具链更新影响，极易翻车——今天好好的，明天 tw-p-4 突然又生效了。
-
twMerge()在运行时解析 class 字符串，自动合并冲突 utility 类：twMerge('tw-p-4', 'tw-p-2')→'tw-p-2' - 它只认带前缀的类：输入必须全是
tw-开头，混入'p-2'或'btn'就当没看见 - 第三方组件类（如
el-button）、手写业务类（如my-card）不受影响
别碰 important: true，除非你在集成遗留系统
开启 important: true 会让每个 Tailwind 类都带 !important，看似能压倒一切，但代价极高：
立即学习“前端免费学习笔记（深入）”；
- Element Plus 的
.el-button.is-disabled本身就有!important，你加了也白加 - DevTools Styles 面板里满屏划掉线，Computed 面板看不出真实来源，调试成本翻倍
- Tailwind 官方明确说：这不是设计意图，仅用于极端集成场景
rounded-md 和 rounded-full 不是“后写的 HTML class 生效”，而是看它们在最终 CSS 文件里的定义位置；一旦构建缓存没清、Vite HMR 没刷新、或者 @tailwind 指令被挪动，这个顺序就乱了，连 class="rounded-full rounded-md" 都可能失效。 
