不能只禁用 button 的 background-color，因为 tailwind 的 preflight 是整体注入的 css 重置层，统一设置 button、input、textarea 等表单控件的 background-color: transparent 及清空 margin、padding、list-style 等规则，打包在 @tailwind base 中且无独立开关；单独覆盖会与 twmerge 冲突且 devtools 难追溯，唯一可靠方式是全局关闭 preflight 并手动补关键基础样式。
为什么不能只禁用 button 的 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 样式怎么办
如果只是某个 <div> 及其子元素不想受 Tailwind 影响（比如嵌入第三方富文本或统计图表），用：<br><pre class="brush:php;toolbar:false;">.reset-tailwind, .reset-tailwind * {
all: revert;
}</pre>加到全局 CSS 或组件 <code><style></style> 里即可。这个规则会把该区域所有样式还原到浏览器默认值，包括 button 背景、ul 缩进、img 对齐方式等。
- 注意：它不依赖 Tailwind 配置，也不影响其他区域
-
revert在 Safari 15.4+ 和 Chrome 99+ 支持良好，旧版需 fallback 到all: unset+ 手动重置关键属性 - 不要对整个
body应用，否则所有 Tailwind 类失效
真正麻烦的不是关不关，而是关完要不要补、补多少、补在哪一层——preflight: false 是开关，但后续的手动重置才是决定 UI 是否稳定的那部分。
