不能只覆盖 button { background-color: initial }，因为 tailwind 的 preflight 是打包进 @tailwind base 的整体 css 重置层，统一设置 button、input 等元素的 background-color: transparent、margin: 0 等规则，无独立开关；硬覆盖不可控且会与 twmerge 冲突，devtools 难追溯；必须通过 coreplugins: { preflight: false } 关闭并重启开发服务器，再用 @layer base 手动补 box-sizing、表单控件和列表样式。
为什么不能只覆盖 button { background-color: initial }？
Tailwind 的 Preflight 不是分散的样式规则，而是一整块打包进 @tailwind base 的 CSS 重置层。它把 button、input、textarea、img、h1 等全部统一设为 background-color: transparent、margin: 0、display: block 等——这些规则没有独立开关，也不支持按元素禁用。
- 直接写
button { background-color: initial }会被 Preflight 规则覆盖（或反过来覆盖 Preflight），结果取决于加载顺序和特异性，不可控 - 加
!important会与twMerge冲突，DevTools 里也看不到这条规则实际是否被 Tailwind 编译出来 - 模板中用
class="bg-red-500"依然生效，但原生button标签行为已丢失，Ant Design / Naive UI 等组件依赖的就是这个原生行为
怎么关掉 Preflight 才算真正生效？
必须在 tailwind.config.js（或 .ts）中硬编码关闭，并重启开发服务器：
- 设置
corePlugins: { preflight: false } - 删除或注释掉所有
@tailwind base的导入（它已不生成任何 CSS） -
必须重启 Vite / Webpack / Next.js dev server —— HMR 不会重新编译
@tailwind base输出，旧样式仍驻留内存
关掉后，img 恢复默认 display: inline（解决 html2canvas 截图偏移），button 恢复原生背景色和内边距，Ant Design 的 .ant-btn 才能正常渲染。
关掉 Preflight 后必须手动补哪几条基础样式？
不是放任不管，而是用 @layer base 精准补三项关键规则：
-
<em></em>和::before/*::after必须补box-sizing: border-box，否则第三方 UI 库布局大面积错位 -
button、input、select、textarea补background-color: initial和border: initial，让组件库按预期接管样式 -
ul、ol补list-style: initial和margin-block: 1em，恢复原生缩进
注意：@layer base 必须写在 @tailwind base 之后、@tailwind components 之前；里面不能用 @apply sm:m-0 这类响应式变体，它们不会生效。
想局部“隔离” Tailwind 样式怎么办？
如果只是某几个容器（比如富文本编辑器输出区、第三方嵌入内容）要彻底脱离 Tailwind 影响，可用 all: revert：
- 写
.reset-tailwind, .reset-tailwind *{all: revert; } - 但注意浏览器兼容性：Chrome 91+、Firefox 96+、Safari 15.4+ 才完整支持；老版本退化为
unset，部分样式可能残留 - 这招适合临时兜底，不适合作为组件库集成主路径——因为
revert无法精确控制“哪些重置该回退”，且不参与 Tailwind 主题系统
真正卡住的点永远是 Preflight：它无声重写了浏览器默认行为，而几乎所有 UI 库都靠这些默认行为活着。改配置、补基础、重启服务，三步缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
