关掉 preflight 是必须的第一步，因其重置 button、img、h1 等原生标签样式导致按钮透明、图片错位、标题异常；必须配置 coreplugins.preflight: false 并重启开发服务器，否则 hmr 不重建 css，旧规则仍生效。
关掉 preflight 是必须的第一步，否则按钮变透明、图片错位、标题字号异常等问题根本压不住——因为这些不是类名撞车，而是 @tailwind base 直接重置了 button、img、h1 等原生标签样式。
为什么 preflight: false 必须先配，且要重启开发服务器
旧 CSS（比如 RuoYi 手写 reset、Element Plus、Ant Design）依赖浏览器默认样式作为基础，而 Tailwind 的 preflight 会无差别注入：button, [type='button'] { background-color: transparent; }img { display: block; }
这类规则不靠类名触发，prefix 或 important: true 完全无效。
必须在 tailwind.config.js 顶层加：
corePlugins: {
preflight: false,
}
改完不重启 dev server，HMR 不会重建 CSS，旧重置规则还在内存里跑。
prefix: 'tw-' 配了但样式“消失”，常见漏改点
加前缀不是魔法，Tailwind 不扫描也不改你的模板，它只管生成哪些类。漏一处，就断链：
- HTML 中
class="flex p-4"→ 必须手动改成class="tw-flex tw-p-4" - JSX 中
className={`flex ${isOpen ? 'hidden' : ''}`→ 改成className={`tw-flex ${isOpen ? 'tw-hidden' : ''}` -
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，样式不生效 -
prefix: 'tw- '（末尾空格）→ 构建失败或行为异常 - 把
prefix写进theme或plugins里 → 完全不生效
动态拼接类名时，twMerge 不是可选，是刚需
写 className="tw-p-4 tw-p-2"，浏览器按 CSS 输出顺序取最后一个生效；但这个顺序受构建缓存、插件加载影响，极易翻车。
twMerge 在运行时解析字符串，自动合并冲突 utility 类：
twMerge('tw-p-4 tw-p-2') → 'tw-p-2'
但它只认带前缀的类：
-
twMerge('tw-p-4 p-2')→ 不合并，也不警告，交由浏览器层叠，结果不可控 -
clsx()或cn()传参也必须全是tw-开头，混入裸类等于白装 -
@apply生成的类会自动加前缀，但手写的.my-btn、第三方组件类（如.el-button）完全不受影响
真正上线前，三件事缺一不可：所有 HTML/JSX 中 Tailwind 类名一个都不能漏改；preflight: false 配完必须重启 dev server；twMerge 输入必须 100% 是带 tw- 的类——少一个，就可能在某个页面角落突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
