必须关闭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"。漏改一处，浏览器就找不到对应规则。
-
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，CSS 不生效 -
prefix: 'tw- '（末尾空格）→ 构建失败或行为异常 -
@apply写在 CSS 文件里能自动转前缀，但 JSX 中拼接的className={`flex ${isOpen ? 'hidden' : ''}`必须手动改成tw-flex和tw-hidden - 第三方组件类（如
el-button）、手写.my-form、@layer自定义类全都不受影响，得你自己隔离
为什么必须关掉 corePlugins.preflight: false
Tailwind 的 @tailwind base 包含大量原生标签重置（比如 button { background-color: transparent; }），这些规则不靠类名触发，prefix 完全无效。UI 库和旧 CSS 依赖这些默认样式，一加载就“归零”。
- 关完必须重启开发服务器，HMR 不会重建这部分 CSS
- 别删
@tailwind base的 import —— 那没用；要的是构建时跳过编译 - 关掉后，
img、button、h1等标签恢复浏览器原生表现，UI 库才能正常渲染
为什么 twMerge 不是可选项而是必选项
动态拼接类名时（如 className={`${base} ${isOpen ? 'tw-hidden' : 'tw-block'}`），两个 padding 类共存会导致层叠顺序不可控：构建缓存、工具链更新、CSS 输出位置变化都可能让最终生效的类变成意外的那个。
立即学习“前端免费学习笔记（深入）”；
-
twMerge('tw-p-4', 'tw-p-2')→ 只保留tw-p-2，不依赖 CSS 加载顺序 - 它只处理带前缀的类，混用
p-4和tw-p-4时完全不识别，也不报错 - 如果你用
clsx或自定义 class 工具，必须确保所有输入都是带tw-前缀的字符串
CSS 变量冲突是隐藏雷区
prefix 对 --tw-bg-opacity、--tw-text-opacity 这类变量名完全无效——它们由 Tailwind 源码硬编码，不会加前缀。你在 :root 里定义同名变量，就会静默覆盖 Tailwind 的默认值。
-
bg-black/30渲染异常、border-t-blue-500颜色变浅，问题往往出在这里 - 不要在
:root或全局作用域里定义以--tw-开头的变量；Tailwind 官方明确将其视为内部保留前缀 - 改用项目专属前缀，比如
--acme-bg-opacity、--myapp-spacing-xs
