唯一可靠方式是关闭整个 preflight 并手动补关键基础样式，因为 Tailwind 的 Preflight 是整体注入的 CSS 重置层，无局部开关；硬覆盖 button 背景色会与 twMerge 冲突且 DevTools 难追溯，关 preflight 后须重启开发服务器并用 @layer base 补 box-sizing、表单控件和列表样式。
不能只禁用 button 的 background-color，Tailwind 的 Preflight 是整体注入的重置层，没有“局部关闭”开关；唯一可靠方式是关掉整个 preflight，再手动补关键基础样式。
为什么直接覆盖 button { background-color: initial } 不行
Preflight 把 button、input、textarea 等统一设为 background-color: transparent，这些规则打包在 @tailwind base 里，不支持按元素拆分开关。硬加 !important 会和 twMerge 冲突，DevTools 里也难定位样式来源——你看到的“没生效”，其实是 Tailwind 根本没生成那条 CSS 规则。
关掉 preflight 后必须重启开发服务器
修改 tailwind.config.js 后，Vite / Webpack 不会自动重编译 @tailwind base 输出：
- 设置
corePlugins: { preflight: false } - 删掉或注释掉所有
@tailwind base的导入（它已无效） - 必须手动重启 dev server，否则旧 CSS 还在内存里
否则 img 仍保持 display: block，html2canvas 截图偏移问题照旧。
立即学习“前端免费学习笔记（深入）”；
关掉后怎么补基础样式才安全
不是全盘放弃控制，而是用 @layer base 补三项最关键的：
-
*和*::before/*::after必须补box-sizing: border-box，否则第三方库布局错位 -
button、input、select、textarea补background-color: initial和border: initial，让 Ant Design / Naive UI 按原样渲染 -
ul、ol补list-style: initial和margin-block: 1em，恢复原生缩进
@layer base 必须写在 @tailwind components 之前，且不能在里面用 @apply sm:m-0 这类响应式变体——它们不会生效。
想局部“隔离” Tailwind 样式怎么办
如果只是某几个 div 要彻底脱离 Tailwind 样式（比如嵌入第三方富文本），可以用 all: revert：
.reset-tailwind, .reset-tailwind * {
all: revert;
}但注意：revert 依赖浏览器支持（Chrome 91+、Firefox 96+），Safari 15.4+ 才完整支持；老版本会退化成 unset，部分样式可能残留。这种方案适合临时兜底，不适合作为组件库集成的主路径。
