根本原因是Tailwind的preflight重置了原生标签样式，而非类名冲突；应关闭preflight（corePlugins: { preflight: false }），而非滥用!important或prefix。
Tailwind CSS 和第三方组件库（比如 Element Plus、Naive UI、Ant Design）样式冲突，**根本不是类名写错或没加对 class，而是两类规则在“不同战场”打架：一类靠类名（.tw-p-4），一类直接作用于标签（button { background: transparent }）。不区分场景乱加 important: true 或 prefix，只会让问题更难定位。
为什么按钮变透明、输入框没边框？先关 preflight
这是最常被误判的“类名冲突”，实际是 Tailwind 的 @layer base（即 preflight）在重置原生标签。它不依赖任何类名，直接命中 button、input、h1 等元素，把背景、边框、字号全清空。
- 打开 DevTools → Elements → 选中按钮 → Styles 面板里找带
data-tailwind="true"的button规则，如果看到background-color: transparent，就是 preflight 在生效 - 确认方式：临时禁用 Tailwind CSS，看按钮是否恢复颜色；若恢复，说明问题出在这里
- 解决方法不是加前缀或 !important，而是关掉它：
corePlugins: { preflight: false }（写在tailwind.config.js里） - 关了之后，浏览器默认样式回归，UI 库才有基础可依；如果你仍需部分重置，可用
@layer base手动补，比如只重置a标签，避开button
为什么 tw-flex 没生效，但 .el-row 却起了作用？检查类名是否加了 prefix
prefix 是唯一能从源头避免同名工具类碰撞的方式，但它只影响 Tailwind JIT 自动生成的类（如 flex → tw-flex），不碰你手写的 .my-btn 或第三方的 .el-button。
-
prefix必须写成prefix: 'tw-'（结尾短横线不能少），写成'tw'会生成非法类名如twtext-lg，样式完全不加载 - HTML/JSX 中所有 Tailwind 类必须手动更新：
class="flex p-4"→class="tw-flex tw-p-4"；漏一个就断链 - 动态拼接也要带前缀：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`，否则运行时找不到类 - 第三方插件（如
tailwindcss-animate）默认不识别前缀，得查文档确认是否支持，否则动画类仍裸奔
为什么加了 !tw-text-red-500 还是没变红？优先级没压过第三方伪类
第三方组件内部大量使用伪类（:hover、:focus）、状态类（.el-button--primary:hover）和属性选择器（[type="submit"]），它们的权重往往比单个工具类高。盲目加 important: true 会让所有 Tailwind 类带上 !important，反而破坏 UI 库自己的状态逻辑。
立即学习“前端免费学习笔记（深入）”；
-
important: true是布尔值，不是字符串 —— 写成important: "true"或important: "#app"以外的字符串都无效 - 全局开
important: true后，!tw-text-sm会变成!tw-text-sm !important，语法非法，局部微调失效 - 更稳妥的做法是局部锁定：
important: '#app'，让!important只作用于根容器内，不影响弹窗、Tooltip 等浮动内容 - 真要覆盖组件内部样式，优先用
:deep(.el-button)（Vue）或 scoped style，而不是靠 class 堆权重
真正难处理的从来不是“怎么加样式”，而是分清哪条规则来自 preflight、哪条来自类名、哪条来自伪类 —— 浏览器 DevTools 的 Computed 面板才是你唯一的裁判，别跳过这步直接改配置。
