关掉 preflight 是最直接有效的动作，需在 tailwind.config.js 中设 corePlugins: { preflight: false } 并重启开发服务器，否则按钮透明、input 失边框、img 强制 block 等问题无法根治，因其规则不依赖类名，加前缀或调顺序均无效。
关掉 preflight 是最直接有效的动作，否则所有按钮变透明、input 失边框、img 被强制设为 display: block 都无法根治——这不是加载顺序或权重问题，而是 Tailwind 在构建时主动注入的标签级重置规则，压根不依赖类名，加前缀、调 @import 顺序、套容器全无效。
为什么关掉 preflight 是第一步
Tailwind 的 @tailwind base 默认包含大量无类名的重置规则，比如：
button, [type='button'] { background-color: transparent; }
img { display: block; margin: 0 auto; }
h1 { font-size: 2em; margin: .67em 0; }
这些规则直接作用于原生标签，和 Element Plus、Ant Design 或你手写的 .btn 完全无关。它们在 CSSOM 解析早期就生效，权重虽不高（0,0,1,1），但胜在“无条件触发”。
-
corePlugins: { preflight: false }必须写在tailwind.config.js（或.ts）顶层配置里 - 改完后必须重启 Vite/Webpack 开发服务器，HMR 不会重建这部分 CSS
- 不是删掉
@tailwind base的 import，而是让构建跳过生成它 - 关掉后，
img恢复inline行内行为，button回归默认背景色，UI 库才能基于浏览器真实语义渲染
怎么用 prefix 隔离工具类，避免和原生类名冲突
关掉 preflight 解决了标签重置，但 text-blue-500 和你写的 .text-blue 还是可能因类名重复而打架——这时候 prefix: 'tw-' 才起作用。
- 必须写成
prefix: 'tw-'（结尾短横线不能少），prefix: 'tw'会生成非法类名如twtext-red-500 - HTML/JSX 中所有 Tailwind 类都得手动补前缀：
class="tw-p-4 tw-flex"、className="tw-bg-gray-100" - 动态拼接时也要补：
className={`tw-p-2 ${isOpen ? 'tw-block' : 'tw-hidden'}`} -
@apply写在 CSS 文件里会自动带前缀，但 JS/JSX 里字符串拼接不会
为什么 @layer 是控制覆盖逻辑的关键
Tailwind 工具类默认落在 @layer utilities，而你手写的普通 CSS 规则默认没声明层级，会被天然压制。真正可控的做法是把自定义样式也放进 @layer 体系里。
- 把组件级覆盖（如
.el-button--primary）放进@layer components - 确保
@tailwind components在@tailwind utilities之前引入，否则你的覆盖规则会被工具类盖掉 - 不要在 UI 组件上直接叠加
tw-p-*、tw-bg-*，这些和组件内置样式直接冲突 -
@apply只能在@layer内部或普通 CSS 规则中使用，跨层调用会报错或不生效
为什么 twMerge 不是可选，而是动态类拼接的刚需
写了 className="tw-p-4 tw-p-2"，浏览器按最终 CSS 文件里规则的定义顺序取最后一个生效。但这个顺序受构建缓存、HMR 状态、插件顺序影响，极易翻车——今天 tw-p-2 生效，明天 tw-p-4 又冒出来。
-
twMerge在运行时解析 class 字符串，自动合并冲突 utility 类：tw-p-4 tw-p-2→ 只保留tw-p-2 - 它只认带前缀的类，
tw-p-4 p-2混用时它无法判断优先级，也不警告 -
cn()或clsx()传参也必须全是tw-开头，否则等于没用
最容易被忽略的是：关掉 preflight 后，你仍需检查第三方插件（如 @tailwindcss/forms）是否悄悄重置了 outline 或 margin；prefix 开启后，所有模板里的类名一个都不能漏；@layer 声明位置错了，@apply 就会静默失效——这些点都不报错，但样式就是不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
