关掉 preflight 是唯一能恢复原生元素默认样式的办法，因其注入的标签级重置规则（如 button 背景透明、输入框无边框）无法被权重、前缀或 !important 覆盖；需配置 corePlugins: { preflight: false } 并重启服务器，同时补全 @layer base 基础样式。
关掉 preflight 是唯一能真正释放原生按钮、输入框、标题等默认样式的办法 —— 其他所有“加权重”“加前缀”“加 !important”的操作，对 button { background-color: transparent; } 这类规则都无效。
为什么按钮变透明、输入框没边框？
不是你漏写了类名，也不是第三方库加载顺序错了，而是 Tailwind 的 @tailwind base（即 preflight）在构建时直接注入了一整套标签级重置规则：
button, [type='button'] { background-color: transparent; }input, select, textarea { margin: 0; padding: 0; }h1, h2, h3 { font-size: inherit; font-weight: inherit; }
这些规则不依赖任何类名，所以 prefix: 'tw-' 改不了它，important: true 压不住它，@layer components 也晚一步生效。你在 DevTools 的 Styles 面板里看到带 data-tailwind="true" 的 button 规则，基本就是它在起作用。
必须关 preflight，且重启开发服务器
在 tailwind.config.js 或 tailwind.config.ts 中明确设置：
立即学习“前端免费学习笔记（深入）”；
corePlugins: {
preflight: false
}注意三点：
- 必须是布尔值
false，写成字符串"false"会静默失效 - 改完配置后，Vite / Webpack / Next.js 开发服务器必须手动重启 —— HMR 不会重建这部分 CSS
-
@tailwind base的 import 语句仍要保留在 CSS 入口文件顶部，否则box-sizing: border-box会丢失，引发布局错乱
关掉后得手动补关键基础样式
preflight 关了，浏览器默认样式回归，但 Tailwind 默认提供的 box-sizing: border-box 和部分安全兜底也没了。你至少得在 @layer base 里补上：
@layer base {
* { box-sizing: border-box; }
ul, ol { list-style: revert; padding-inline-start: revert; }
img { max-width: 100%; height: auto; }
button, input, select, textarea {
background-color: initial;
border: initial;
}
}别用 @apply 写这些 —— @layer base 阶段 @tailwind utilities 还没注入，sm:p-2 或 hover:bg-gray-100 全部无效。
前缀和 twMerge 是配套动作，不是替代方案
prefix: 'tw-' 和 twMerge 解决的是另外两类问题，必须和 preflight: false 搭配使用：
-
prefix: 'tw-'：防止你写的flex和 Naive UI 的.n-button .flex撞名；但必须所有 HTML/JSX 中的 Tailwind 类都同步加前缀，漏一个（比如还写class="p-4"）就失效 -
twMerge：合并动态 class 时自动剔除被覆盖项，例如twMerge('tw-p-2', isBig && 'tw-p-6')→ 输出'tw-p-6'；但它只识别带tw-前缀的类，混入p-2或el-button就直接放弃处理
最容易被忽略的落地细节：三件事缺一不可 —— preflight: false 配了、开发服务器重启了、所有模板里的 Tailwind 类都加了 tw- 前缀。少一个，按钮就还是透明的。
