必须组合使用 preflight: false、prefix: 'tw-' 和 twMerge 才能彻底解决样式冲突——关预检恢复原生样式，加前缀隔离工具类，用 twMerge 合并动态类；配置后须重启开发服务器。
直接加 prefix 或关掉 preflight 都不能单独解决问题，必须组合使用 —— 否则不是类名撞车，就是基础样式被重置，或者特异性压不过旧 CSS。
为什么单纯改 class 名（如加 tw-）会失效
加 prefix: 'tw-' 只让 Tailwind 生成的工具类带前缀，比如 tw-p-4、tw-text-red-500，但它不碰你手写的 .btn、第三方库的 .el-button，也不动 @tailwind base 里那些全局重置规则。
- 漏改一处 HTML 或 JSX 中的 class 字符串，比如还写
class="p-4"，浏览器根本找不到tw-p-4，样式就“消失” -
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，不是合法类名，CSS 不生效 -
@apply p-4在 CSS 文件里能自动转成tw-p-4，但你在 JS 里拼的字符串className={`p-4 ${isOpen ? 'hidden' : ''}`必须手动改成tw-p-4和tw-hidden
为什么关掉 preflight 是刚需
corePlugins.preflight: false 不是可选项，是必须项。Tailwind 的 @tailwind base 包含 Normalize.css + 大量原生标签重置（比如把 img 设为 display: block、button 清掉默认边框和背景），这些会直接破坏 Element Plus、Ant Design、RuoYi 等 UI 库的渲染逻辑。
- Vue + Vite 项目改完配置后必须重启 dev server，HMR 不会自动重建 CSS
- 关掉 preflight 后，
@tailwind base这部分 CSS 根本不生成，不是删 import，是跳过编译 - 别指望靠加载顺序硬调：把自定义 CSS 放 Tailwind 后面，一旦有
!important或高特异性选择器（如div .btn），照样被盖掉
为什么必须搭配 twMerge
加了前缀、关了 preflight，你仍可能在组件里写 className="tw-p-4 p-2" —— 两个 padding 类同时存在，浏览器按层叠顺序取最后一个生效，但这个顺序取决于构建时 CSS 输出位置，极易因缓存或工具链更新翻车。
立即学习“前端免费学习笔记（深入）”；
-
twMerge会识别并合并冲突 utility 类，比如tw-p-4 tw-p-2→ 只保留tw-p-2 - 它不依赖 CSS 加载顺序，而是在运行时解析 class 字符串，适合动态拼接场景
- 注意：它只处理带前缀的类（如
tw-p-4），如果你混用p-4和tw-p-4，它无法判断优先级，也不会警告
真正落地时，最容易被忽略的是三件事：HTML/JSX 里所有 Tailwind 类名一个都不能漏改；preflight: false 必须配合重启服务验证；twMerge 的输入必须全是带前缀的类，否则等于没用。
