禁用 tailwind 的 preflight 是唯一可靠方式，即在 tailwind.config.js 中设置 coreplugins.preflight: false，从而避免其将 button 背景设为 transparent 并干扰 ant design、naive ui 等组件库样式。
怎么禁用 Tailwind 的 button 默认透明背景
Tailwind 的 preflight 会把原生 button 的 background-color 设为 transparent，直接覆盖 Ant Design、Naive UI 或 Element Plus 的默认按钮样式。这不是 bug，是 Preflight 主动重置行为。
最直接的解法是关掉整个 Preflight，而不是只改 button —— 因为 Tailwind 没提供“仅禁用 button 重置”的开关。
-
corePlugins.preflight: false是唯一可靠方式，它让 Tailwind 跳过注入@tailwind base - 别试图用
!important覆盖，会和twMerge冲突，且调试时样式来源难追溯 - 关闭后，
img不再被设为display: block，这对html2canvas截图偏移问题能根治
哪些 corePlugins 可以单独关闭而非全关 preflight
除了 preflight，Tailwind 允许你按需关闭其他核心功能，比如 cursor、listStyle、textDecoration 等，只要它们没被你的项目用到。
例如禁用光标类：
module.exports = {
corePlugins: {
cursor: false,
// preflight: false, // 这行不加，就只关 cursor
}
}
- 关闭单个插件不会影响其他 utility 类生成，比如关了
cursor，hover:cursor-pointer就不再输出 - 但像
preflight这种底层重置类，和其他插件不是平级关系；它一关，所有基础元素（h1～h6、p、ul、input）的默认样式都回归浏览器原生行为 - 想保留部分 Preflight 效果？做不到。Tailwind 不支持“白名单式”启用基础样式
为什么不能靠 CSS 加载顺序解决冲突
有人试过把 UI 库的 CSS 放在 @tailwind base 后面引入，指望后者“赢”过前者。这在开发环境可能临时有效，但不可靠。
- Webpack/Vite 的 CSS 提取顺序受
content扫描路径、@layer声明位置、甚至文件名排序影响 - 生产构建中，CSS 可能被合并、压缩、分片，加载顺序更难控制
- Preflight 的规则带
!important（如img { display: block !important; }），普通样式几乎无法对抗
关掉 preflight 后要注意什么
禁用 preflight 不是无代价操作。它会让浏览器原生样式重新生效，而这些样式在不同浏览器间本就有差异。
-
margin和padding在h1、p上会恢复，可能造成布局跳动，需手动用mt-0、mb-4等补位 -
button和input的边框、焦点轮廓（outline）回归原生，若需可访问性保障，得自己加focus:ring-2类 - 如果用了
twMerge，记得保留它 —— 它能防止你给 Antd 组件同时写class="ant-btn bg-blue-500"时，Tailwind 的bg-blue-500被错误丢弃
真正麻烦的不是关不关，而是关完要不要补、补多少。老项目建议先关 preflight，再用浏览器 DevTools 检查关键组件（按钮、输入框、卡片容器）是否渲染异常，逐个微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
