关掉 corePlugins.preflight: false 是必须做的第一步，因其禁用 Tailwind 的 preflight 样式（如 button 透明、img 块级），否则与 Element Plus 等 UI 库冲突；prefix 和 important 均无法替代该配置。
关掉 corePlugins.preflight: false 是唯一有效解法
不是“可选优化”，是必须做的第一步。Tailwind 的 @tailwind base 里包含的 preflight 规则（比如 button { background-color: transparent }、img { display: block }）直接作用在 HTML 标签上，跟类名无关。Element Plus 按钮变透明、html2canvas 截图文字偏下、Naive UI 输入框边框消失——全因它而起。
在 tailwind.config.js 或 tailwind.config.ts 中设置：
module.exports = {
corePlugins: {
preflight: false,
},
content: ['./src/**/*.{vue,js,ts}'],
}
注意：不是删掉 @tailwind base 的 import，而是让构建跳过生成这部分 CSS；改完必须重启开发服务器，HMR 不会重建 preflight 规则。
prefix: 'tw-' 对 preflight 完全无效
开了 prefix: 'tw-' 后，flex 变成 tw-flex，但 button { background-color: transparent } 这条规则依然存在，且照样生效——因为它不依赖任何类名。
立即学习“前端免费学习笔记（深入）”；
常见误判场景：
- 以为加了前缀按钮就不透明了 → 实际没动 preflight，照样透明
- 把
prefix写进theme或plugins里 → 配置不生效 -
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，样式不触发
important: true 只能当临时止血贴
important: true 会让所有 Tailwind 工具类自动加 !important，比如 text-red-500 编译为 color: #ef4444 !important，确实能压过 preflight 的标签选择器。但它代价明确：
- 必须写成布尔值
important: true，写成字符串如important: "true"或important: "#app"都无效 - 全局开启后，你后续写的
!text-sm会变成!text-sm !important，语法非法，微调失效 - DevTools 里满屏划掉线，根本分不清哪条真正生效
更稳妥的做法是局部锁定：important: '#app'，只影响根容器内，避开第三方弹窗、Tooltip 等浮动内容。
别信“CSS 加载顺序能解决问题”
把 UI 库样式放 Tailwind 后面，看似“后来者居上”，但遇到 div .btn 这种高特异性选择器，或第三方库自带 !important（如 .el-button.is-disabled），照样被盖。
真正可靠的组合是：corePlugins.preflight: false + prefix: 'tw-' + twMerge。三者缺一不可：前者恢复浏览器默认样式，后者隔离类名，中间那个防止动态拼接时冲突。漏改一处 class="p-4" 为 class="tw-p-4"，样式就“消失”——没人帮你自动补。
