必须组合配置prefix: 'tw-'、coreplugins.preflight: false和twmerge——prefix解决类名字符串冲突但需手动更新所有class属性，preflight: false恢复原生标签默认样式以防按钮透明等重置问题，twmerge确保动态类合并时padding等属性确定生效，三者缺一不可。
必须组合配置 prefix: 'tw-'、corePlugins.preflight: false 和 twMerge，缺一不可——只改类名前缀会丢样式，只关预检会让按钮变透明，不合并动态类则 padding 冲突靠构建顺序决定，极不稳定。
为什么单独开 prefix: 'tw-' 还是样式失效
它只让 Tailwind 生成的工具类带前缀（如 tw-p-4），但不会自动改你模板里的 class 字符串。漏写一处 class="p-4"，浏览器就找不到 tw-p-4，那一处样式直接消失。
-
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，CSS 不生效 -
prefix: 'tw- '（末尾空格）→ 构建失败或行为异常 - JSX 中
className={`flex ${isOpen ? 'hidden' : ''}`必须手动改成tw-flex和tw-hidden -
@apply p-4在 CSS 文件里能自动转成tw-p-4，但字符串拼接（如text-${color}-500）完全不被识别，也不会生成对应 CSS
为什么必须关掉 corePlugins.preflight: false
Tailwind 的 @tailwind base 包含全局重置规则，比如 button { background-color: transparent }、img { display: block }，这些跟类名无关，加前缀完全无效。Element Plus 按钮变透明、RuoYi 表单错位，根因都在这里。
- 不是删
@tailwind base的 import，而是让构建跳过生成这部分 CSS - Vite / Webpack 项目改完必须重启开发服务器，HMR 不触发 preflight 重建
- 关掉后，原生标签恢复浏览器默认样式，UI 库才能按预期渲染
为什么 twMerge 不是可选项而是刚需
你写了 className="tw-p-4 tw-p-2"，浏览器取最后一个生效，但这个“最后”取决于构建时 CSS 输出顺序——缓存、插件更新、打包配置微调都可能翻车。
-
twMerge('tw-p-4', 'tw-p-2')→ 确定返回'tw-p-2'，运行时解析，不依赖构建顺序 - 只处理带前缀的类：
twMerge('tw-p-4', 'p-2')不会警告，也不合并，结果还是两个类共存 - 搭配
clsx用更自然：twMerge(clsx('tw-p-4', isOpen && 'tw-p-2')) - 所有传给
twMerge的字符串必须已带tw-前缀，否则等于没用
最容易被忽略的是三件事：HTML/JSX 里每个 Tailwind 类名都得手动补 tw-；preflight: false 改完不重启服务，CSS 还在用旧规则；twMerge 输入里混进一个无前缀类，整个合并逻辑就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
