必须关闭 tailwind 的 preflight 以避免覆盖原生标签默认样式，导致 ui 库渲染异常；关闭后可通过 @layer base 补充必要微调，而非依赖 !important。
preflight 直接重置原生标签样式，不靠类名触发
Tailwind 的 @tailwind base 里包含的 preflight 规则，是作用在 button、img、svg、h1 等原生 HTML 标签上的全局样式，比如：button { background-color: transparent; }、img, svg { display: block; }。这些规则跟 class 名完全无关——你没写 btn 或 text-center，它照样生效。
旧项目或 UI 库（如 Element Plus、Ant Design Vue、RuoYi）依赖浏览器默认行为：button 有背景色、img 是 inline、svg 默认 vertical-align: middle。preflight 一上，这些基础渲染逻辑就被覆盖，导致按钮变透明、图标下移、表单错位、html2canvas 截图偏移等现象。
这不是“类名冲突”，所以加 prefix、改 class 顺序、套 wrapper 容器都无效。
关 preflight 不是可选，而是必须的第一步
必须在 tailwind.config.js 中明确设置：corePlugins: { preflight: false }。这不是删除 @tailwind base 引用，而是让构建过程跳过生成那部分重置 CSS。
- 不关 preflight → 原生标签被强制重置 → UI 库无法按设计意图渲染
- 关了之后 → 浏览器恢复默认样式 → Element Plus 按钮有背景、Antd icon 对齐、RuoYi 表单布局正常
- Vite / Webpack 项目改完配置后必须重启 dev server，HMR 不会重建 preflight 规则
关了 preflight 后，svg / img 下移问题怎么收尾
关掉 preflight 虽然恢复了浏览器默认，但有些 UI 库（比如 Antd Vue）内部仍依赖 svg { vertical-align: middle } 这类微调。此时需手动补一条轻量级修复：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
在你的主 CSS 文件中，紧挨着 @tailwind base 后面加：
@tailwind base;
@layer base {
svg {
vertical-align: middle;
}
}
@layer base 确保这条规则和 preflight 处于同一层权重，且会被 Tailwind 正确注入到输出 CSS 开头位置。不要写成独立的 svg { ... } 放在 @tailwind utilities 后面——那样容易被第三方库的高特异性选择器盖掉。
别用 important: true 当兜底方案
important: true 是把所有 Tailwind 工具类加上 !important，看似能压过 preflight，但它代价太大：
- 后续用
!text-sm做局部覆盖会失效（变成!text-sm !important，语法非法） - DevTools 里满屏划掉线，根本分不清哪条规则真正生效
- 它解决的是“权重问题”，而 preflight 是“逻辑覆盖”——源头没动，只靠权重硬顶，后期维护成本陡增
真正需要它的时候极少：比如嵌入老系统 iframe、富文本编辑器内联样式不可控、或某些强封装 UI 库（如 Ant Design Vue v4）完全不允许你调整加载顺序。绝大多数情况，关 preflight + @layer base 微调才是干净解法。
最容易被忽略的点是：关 preflight 后，你还得检查是否真有第三方 CSS 加载失败（比如禁用 Tailwind 后按钮恢复正常，说明问题确实在 preflight；如果还是异常，就得查资源加载链了）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
