关掉 preflight 是最直接有效的解法，但必须配合手动补漏，否则会引发布局错乱、列表缩进消失、按钮焦点轮廓丢失等问题；它通过高特异性标签规则重置默认样式，如 button 背景透明、h1–h6 继承字体，且不受 important 或前缀影响。
关掉 preflight 是最直接有效的解法，但必须配合手动补漏，否则会引发布局错乱、列表缩进消失、按钮焦点轮廓丢失等新问题。
为什么按钮变透明、标题没粗细？
Preflight 不是“加样式”，而是用高特异性规则主动重置浏览器默认行为。比如它对 button 元素写死了一条：background-color: transparent;，这条规则不依赖任何类名，important: true 对它完全无效。同理，h1–h6 的字体大小和粗细也被设为 inherit，导致 Naive UI 或 Ant Design 的标题样式直接失效。
- 它改的是 HTML 标签选择器，不是工具类，所以加前缀
prefix: 'tw-'也拦不住 - 它在构建时注入，不是运行时 JS 行为，改完配置不重启 dev server 就看不到效果
- 它不只影响按钮和标题，还清空了
ul的padding-inline-start，嵌套列表会塌成一行
怎么安全地禁用 preflight？
在 tailwind.config.js 中设置 corePlugins: { preflight: false }，而不是删掉 @tailwind base 的 import —— 后者只是 CSS 引入方式，前者才是控制 Tailwind 是否生成那批重置规则的开关。
- 配置项必须是布尔值
false，不能写成字符串"false"，否则静默失效 - Vite / Vue CLI / Next.js 项目改完都要重启开发服务器，HMR 不会自动重建 CSS
- 禁用后
@tailwind base指令仍需保留在主 CSS 文件顶部，否则box-sizing: border-box等关键规则会丢失
禁用后哪些样式必须手动补？
Preflight 关键作用是统一盒模型和清理干扰，默认关闭后，你得自己在 @layer base 里补上真正需要的部分，而不是全盘恢复旧样式。
- 必须补：
* { box-sizing: border-box; }，否则所有 padding/border 计算错乱 - 推荐补：
ul, ol { list-style: revert; margin: revert; padding: revert; }，精准还原原生缩进与符号 - 按需补：
img { max-width: 100%; height: auto; }（Preflight 原本就做了，关掉后就得自己加） - 慎补：
all: revert，它会把display、color等无关属性也重置，引发不可控副作用
要不要用 important: true 或 prefix: 'tw-' 替代？
这两个配置解决的是不同维度的问题，不能替代 preflight: false：
-
important: true给所有工具类加!important，只影响你写的text-red-500这类类名，对button { background: transparent }这种标签规则毫无作用 -
prefix: 'tw-'只给工具类加前缀，比如把flex变成tw-flex，但button元素本身还是会被 Preflight 的全局规则覆盖 - 单独开
important: true还会让后续的!text-sm手动修饰符失效，调试更困难
真正要稳住原有样式，核心动作只有两个：关 preflight + 补 @layer base。其他都是治标不治本的权宜之计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
