按钮变透明、标题变小不是类名冲突，而是因@tailwind base的preflight规则直接重置html标签样式，如button { background-color: transparent }；必须设coreplugins.preflight: false并重启服务器，才能释放原生样式、保障ui库正常渲染。
为什么按钮变透明、标题变小不是类名冲突？
因为问题根源在 @tailwind base 里的预检（preflight）规则，比如 button, [type='button'] { background-color: transparent; } 这类样式不依赖类名，而是直接作用于 HTML 标签。哪怕你加了 prefix: 'tw-'，它也完全无效——前缀只改类名，不改选择器结构。
关掉 corePlugins.preflight: false 是刚需，不是可选项。它让 Tailwind 跳过生成整段基础重置 CSS，把原生样式交还给浏览器，UI 库（Element Plus、Naive UI、Ant Design Vue）才能正常渲染。
- 必须重启开发服务器（Vite/HMR 不会自动重建这部分 CSS）
- 不是删掉
@tailwind base的 import，是配置层面跳过编译 - 关掉后，
img不再被设为display: block，h1恢复默认字号，组件样式才有可靠基础
为什么只加 prefix: 'tw-' 还不够？
prefix: 'tw-' 确实能让 text-lg 变成 tw-text-lg，但它只影响 JIT 自动生成的工具类，对三类东西完全没用：
-
@apply写的自定义类（需手动加前缀或重写） - 你自己写的
.btn、.card等业务类名 - 第三方库的
.el-button、.n-button—— 它们压根不走 Tailwind 编译流程
常见错误：prefix: 'tw'（缺短横线）→ 生成 twtext-lg，非法类名，样式不生效；HTML 里漏写 tw-，比如还写 class="p-4"，浏览器根本找不到对应规则。
为什么动态拼接 class 时要配 twMerge？
当你写 className={`tw-p-4 ${isOpen ? 'tw-hidden' : 'tw-block'}`}，一旦某处漏加 tw- 或混用裸类（如 p-4），twMerge 就失效——它只识别带前缀的类，且不会警告。
-
twMerge('tw-p-4 tw-p-2')→ 输出'tw-p-2'（后者覆盖前者） -
twMerge('tw-p-4 p-2')→ 仍输出'tw-p-4 p-2'，但浏览器按层叠顺序取最后一个，而顺序取决于构建时 CSS 输出位置，极易因缓存翻车 - 它不依赖加载顺序，运行时解析字符串，适合 React/Vue 的动态 class 场景
最容易被忽略的落地细节
真正上线时，三件事漏掉任何一项都会导致样式“局部失灵”：
- 所有 JSX/HTML 中的 Tailwind 类名一个都不能漏改：
class="tw-flex tw-gap-2"，不是“大部分改了就行” -
preflight: false配完不重启 dev server，CSS 文件里依然含那段重置逻辑 -
twMerge的输入必须全是带tw-前缀的类，混入裸类或第三方类名（如el-button）等于白装
第三方插件（比如 tailwindcss-animate）默认不识别前缀，得查文档确认是否支持，否则动画类还是裸奔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
