必须在 tailwind.config.js 中设置 coreplugins.preflight = false 才能关闭 preflight，改完需重启开发服务器；关闭后需手动补基础样式（如 box-sizing、表单控件重置），否则元素回归浏览器原生样式。
关掉 Preflight 必须改 tailwind.config.js 的 corePlugins.preflight
不是删 CSS 文件，也不是加 !important 覆盖，更不是靠 HTML class 顺序调整——Preflight 是 Tailwind 在构建时注入 @tailwind base 的开关，只在配置里关才生效。
直接修改配置文件：
module.exports = {
corePlugins: {
preflight: false,
},
content: ["./src/**/*.{vue,js,ts}"],
}
改完必须重启开发服务器（比如 Vite 或 Webpack Dev Server），HMR 不会重新注入 base 层 CSS，不重启就等于没关。
关了之后按钮/输入框变丑？这不是 bug，是你得手动补基础样式
Preflight 关掉后，button、input、textarea 等元素回归浏览器原生样式：button 有默认背景和边框，input 没有圆角，所有表单控件 box-sizing 都是 content-box——这正是 Ant Design、Naive UI、Element Plus 能正常显示的前提，但也是你项目布局可能突然错位的源头。
- 至少补
@layer base里的*, ::before, ::after { box-sizing: border-box } - 补关键表单控件基础重置，例如：
button, input, select, textarea { margin: 0; font-family: inherit; } - 别漏
img { max-width: 100%; height: auto; }，否则响应式图片失效
important: true 不能代替关 Preflight
有人试过开 important: true 想“压过” Preflight 的 button { background-color: transparent }，结果只是让所有 Tailwind 类都带 !important，调试时 DevTools 里一堆红叉，且仍无法解决 img { display: block } 导致 html2canvas 截图文字偏移的问题。
它只该用在极少数场景：
- 嵌入第三方 iframe，你完全控制不了它的 CSS 加载顺序
- 集成老系统遗留页面，连
tailwind.config.js都没法动 - 明确知道关不了 Preflight，又必须让某个 utility 类生效（比如
text-red-500）
全局开 important: true 后，你再写 class="text-red-500 !text-blue-500" 就会失效，因为两个都是 !important，权重相同，后者不一定覆盖前者。
为什么不能只局部覆盖 button 的 background-color
Preflight 不是零散规则，而是一整块 @layer base 输出，包含：button, [type='button'] { background-color: transparent; }、img { display: block; }、h1 { margin: 0; } 等十多个强耦合规则。你单独加一条 button { background-color: initial !important }，DevTools 里根本看不出来源，而且会被 twMerge 干扰合并，最终行为不可预测。
真正的解法只有两个：
- 关 Preflight + 手动补你需要的 base 样式（推荐）
- 保留 Preflight，但用
@layer base在 CSS 文件里精准覆盖，例如：@layer base { button:not([class*="el-"]):not([class*="naive-"]) { background-color: initial; } }
复杂点在于：关 Preflight 后，你得自己判断哪些基础样式是 UI 库依赖的、哪些是项目真正需要的——没有银弹，只有权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
