唯一可靠方式是全局关闭 preflight 并手动补关键基础样式，因 preflight 是整体注入的重置层，无局部开关；硬覆盖会与 twmerge 冲突且 devtools 难追溯；关 preflight 后须重启开发服务器并用 @layer base 补 box-sizing、表单控件和列表样式。
不能为特定元素“局部禁用” Tailwind 的 Preflight，默认机制不支持按元素开关；唯一安全路径是全局关闭 preflight，再手动补关键基础样式。
为什么 button { background-color: initial } 加 !important 会失效
Preflight 规则打包在 @tailwind base 中，统一设 button、input、textarea 为 background-color: transparent，没有独立 CSS 选择器可单独覆盖。硬加 !important 会与 twMerge 冲突，DevTools 里看不到该规则——因为 Tailwind 根本没生成它。
关 preflight 后必须重启开发服务器
修改 tailwind.config.js 中的 corePlugins: { preflight: false } 后，Vite / Webpack 不会自动重编译 @tailwind base 输出。旧 CSS 仍驻留在内存中，img 依然保持 display: block，html2canvas 截图偏移问题照旧。必须手动执行 pnpm dev 或 npm run dev 重启服务。
补基础样式时只写这三项最关键
@layer base 必须写在 @tailwind components 之前，且不能在里面用响应式变体（如 sm:m-0）。只补以下三项，否则第三方 UI 库（Ant Design / Naive UI）布局错位或按钮无法渲染：
-
*和*::before/*::after补box-sizing: border-box -
button、input、select、textarea补background-color: initial和border: initial -
ul、ol补list-style: initial和margin-block: 1em
补太多反而危险：比如补 h1 { margin: 0 } 就会让原生语义标题失去默认间距，而你其实只需要让组件库按钮正常显示——不是重写整个浏览器默认样式表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
