为什么不能只通过覆盖 Button 的 background-color 解决问题
直接给出结论：在使用 Tailwind CSS 的工作流中，企图通过 !important 单独覆盖某个元素的 background-color 只会让维护变得异常复杂。Tailwind 内置的 preflight 本质上是一个全局 CSS 重置层，它统一将 button、input、textarea 等表单控件的 background-color 设为 transparent，同时清空 margin、padding、list-style 等默认样式。难点在于这些规则都打包在同一个 @tailwind base 输出中，没有独立的开关可以单独关闭某一项。
如果强行使用 !important 去覆盖 button { background-color: transparent }，接下来就会与 twMerge 的合并逻辑产生冲突。在 DevTools 里很难追溯到这个覆盖的来源，排查起来非常耗时。因此，不建议采用这条路径。
唯一可靠的方案：关闭整个 preflight
在 tailwind.config.js 中添加以下配置即可：
module.exports = {
corePlugins: {
preflight: false,
},
content: ["./src/**/*.{vue,js,ts}"],
}
这样 Tailwind 会跳过整个 @tailwind base 的 CSS 输出。其中不仅包括 button 背景为透明，还涉及 img 的 display: block、h1 的 margin: 0——总之所有样式都会回归到浏览器的原始默认值。
这带来以下连锁反应：
- Ant Design / Naive UI / Element Plus 等组件库的按钮样式能正常渲染
- html2canvas 的截图偏移问题也会消失，因为
img不再被强制设为display: block - 注意：修改配置后必须重启开发服务器（如 Vite），否则 HMR 不会重新注入 CSS
关闭 preflight 后，如何安全地补充基础样式
关闭 preflight 并不意味着完全不管，反而需要主动添加一些关键重置样式，否则 button、input 等元素会直接暴露浏览器最原始的丑陋样式。重点集中在以下三项：
@layer base {
*, *::before, *::after {
box-sizing: border-box;
}
button, input, select, textarea {
background-color: initial;
border: initial;
}
ul, ol {
list-style: initial;
margin-block-start: 1em;
margin-block-end: 1em;
}
}
这里有几点容易踩的坑：
@layer base必须写在@tailwind base之后、@tailwind components之前- 不要在
@layer base中使用@apply带上响应式变体（如sm:m-0），这些不会生效 - 如果项目中已经引入了
normalize.css，仍需保留@tailwind base（即便为空），否则box-sizing: border-box缺失会导致第三方库布局错乱
只想局部“隔离” Tailwind 样式该如何处理
如果问题仅局限于某个 及其子元素不受 Tailwind 影响（例如嵌入第三方富文本或统计图表），则无需调整全局配置。采用下面更轻量的方案：
.reset-tailwind, .reset-tailwind * {
all: revert;
}
将此 class 添加到目标容器上，它会把该区域的所有 CSS 属性还原为浏览器默认值——包括 button 背景、ul 缩进、img 对齐方式等。优点是不依赖 Tailwind 配置，也不会影响其他区域。
但需要注意以下几点：
revert在 Safari 15.4+ 和 Chrome 99+ 上支持良好，旧版浏览器需要 fallback 到all: unset然后手动重置关键属性- 不要对整个
body应用该 class，否则所有 Tailwind 类都会失效
回到整体方案，真正的难点不在于关闭 preflight 本身，而在于关闭之后是否要补、补多少、补在哪一层。 preflight: false 只是一个开关，后续的手动重置才是决定 UI 稳定性的关键。
