如何解决Tailwind和自定义CSS选择器冲突的问题？

必须关闭corePlugins.preflight: false、启用prefix: 'tw-'并使用twMerge——三者缺一不可：关preflight恢复原生标签样式，加前缀隔离工具类名，twMerge确保动态类合并时padding等属性不冲突。

必须关掉 corePlugins.preflight: false，加 prefix: 'tw-'，再用 twMerge 处理动态类拼接——三者缺一不可。只改前缀会丢基础样式，只关 preflight 会撞类名，不用 twMerge 会导致 tw-p-4 和 tw-p-2 层叠结果不可控。

为什么 prefix: 'tw-' 单独不解决问题

它只让 Tailwind 编译器生成带前缀的类（如 tw-p-4），但不会自动重写你模板里的 class="p-4"。漏改一处，浏览器就找不到对应规则。

1. prefix: 'tw'（缺短横线）→ 生成 twtext-red-500，非法类名，CSS 不生效
2. prefix: 'tw- '（末尾空格）→ 构建失败或行为异常
3. @apply 写在 CSS 文件里能自动转前缀，但 JSX 中拼接的 className={`flex ${isOpen ? 'hidden' : ''}` 必须手动改成 tw-flex 和 tw-hidden
4. 第三方组件类（如 el-button）、手写 .my-form、@layer 自定义类全都不受影响，得你自己隔离

为什么必须关掉 corePlugins.preflight: false

Tailwind 的 @tailwind base 包含大量原生标签重置（比如 button { background-color: transparent; }），这些规则不靠类名触发，prefix 完全无效。UI 库和旧 CSS 依赖这些默认样式，一加载就“归零”。

1. 关完必须重启开发服务器，HMR 不会重建这部分 CSS
2. 别删 @tailwind base 的 import —— 那没用；要的是构建时跳过编译
3. 关掉后，img、button、h1 等标签恢复浏览器原生表现，UI 库才能正常渲染

为什么 twMerge 不是可选项而是必选项

动态拼接类名时（如 className={`${base} ${isOpen ? 'tw-hidden' : 'tw-block'}`），两个 padding 类共存会导致层叠顺序不可控：构建缓存、工具链更新、CSS 输出位置变化都可能让最终生效的类变成意外的那个。

1. twMerge('tw-p-4', 'tw-p-2') → 只保留 tw-p-2，不依赖 CSS 加载顺序
2. 它只处理带前缀的类，混用 p-4 和 tw-p-4 时完全不识别，也不报错
3. 如果你用 clsx 或自定义 class 工具，必须确保所有输入都是带 tw- 前缀的字符串

CSS 变量冲突是隐藏雷区

prefix 对 --tw-bg-opacity、--tw-text-opacity 这类变量名完全无效——它们由 Tailwind 源码硬编码，不会加前缀。你在 :root 里定义同名变量，就会静默覆盖 Tailwind 的默认值。

1. bg-black/30 渲染异常、border-t-blue-500 颜色变浅，问题往往出在这里
2. 不要在 :root 或全局作用域里定义以 --tw- 开头的变量；Tailwind 最新明确将其视为内部保留前缀
3. 改用项目专属前缀，比如 --acme-bg-opacity、--myapp-spacing-xs