因为Tailwind工具类特异性相同，生效取决于CSS声明顺序而非HTML中class书写顺序；Vite热更新或PostCSS插件顺序变动可能导致.text-red-500在CSS中位于.text-blue-500之后，使红色覆盖蓝色。
为什么 class="text-red-500 text-blue-500" 不一定生效蓝色？
因为 Tailwind 所有工具类（如 text-red-500、text-blue-500）都是单类选择器，特异性完全相同。最终谁生效，取决于它们在生成的 CSS 文件中的**声明顺序**，而不是你在 HTML 里怎么写。Vite 热更新、PostCSS 插件顺序微调、甚至 JS 动态拼接 class 字符串，都可能打乱这个顺序。
常见误判：你写了 class="text-red-500 text-blue-500"，本意是让蓝色覆盖红色，但构建后 .text-red-500 规则恰好出现在 CSS 文件更靠下 → 红色反而赢了。
- 不要靠 HTML 中 class 的书写顺序控制覆盖逻辑
- 避免在同一元素上堆叠冲突类（比如同时用
rounded-md和rounded-full） - 改用逻辑控制：用
computed或条件表达式只推一个有效类
如何让自定义 CSS 不被 Tailwind 的 utilities 覆盖？
Tailwind 默认把所有工具类注入到 @layer utilities，而你手写的普通样式（比如 .title { color: #1e40af; }）默认不在任何 @layer 中，会被自动归入最低优先级层 —— 所以永远被 @tailwind utilities 压制。
必须显式声明同级或更高层级：
立即学习“前端免费学习笔记（深入）”；
- 把基础重置（
html、body）放进@layer base - 把组件级样式（如
.card）放进@layer components - 把扩展工具类（如
.text-brand）放进@layer utilities，且要放在@tailwind utilities之前
错误写法：@tailwind utilities 放在自定义 @layer utilities 前面 → 你的类直接被 Tailwind 覆盖。
preflight 导致按钮透明、输入框塌陷，怎么破？
这不是类名冲突，是 Tailwind 的 @tailwind base 通过 preflight 全局重置了 button、input 等原生标签样式（例如 button { background-color: transparent; }）。Ant Design、Element Plus、Naive UI 这些库都依赖浏览器默认样式工作，一关就崩。
正确解法只有一行配置：
- 在
tailwind.config.ts中设corePlugins: { preflight: false } - 不是注释掉
@tailwind base—— 那会丢掉box-sizing: border-box等必要规则 - 也不是加
prefix或开important: true—— 它们对@tailwind base无效
关掉后，UI 库立刻恢复正常，你仍可照常使用所有 Tailwind 工具类。
什么时候该开 important: true？
它会让所有 Tailwind 工具类自动加 !important，本质是“用权重压制外部类”，仅适用于明确知道对手是谁的场景：
- 和 Bootstrap 5 共存，且你要
flex、rounded-lg覆盖.d-flex、.rounded - 第三方 UI 库（如 Element Plus）预设样式侵入性强，
preflight又禁用不了 - 线上救火，没时间重构 class 使用逻辑
风险点很实在：important: true 会干扰你后续手动写的 !text-sm，也会影响 CSS 自定义属性（如 --tw-bg-opacity）的继承链。真正卡住的点永远是 preflight —— 它无声重写了浏览器默认行为，而 UI 库正是靠这个活的。
