Tailwind 的 Preflight 直接重置 HTML 元素默认样式，覆盖而非补充，导致老项目样式失效；关闭它需手动补全 box-sizing 等基础规则，并重启开发服务器。
因为 Tailwind 的 @tailwind base（即 Preflight）直接重置了大量 HTML 元素的默认样式，且不依赖类名、不跟你商量——button、ul、img、h1 等标签一加载就变样，老项目里那些靠浏览器默认行为或隐式继承写的 CSS 全面失效。
preflight 是“覆盖”不是“补充”
Preflight 不是帮你加几条 reset 规则，而是用高优先级标签选择器强行归零：它把 button 的背景设为 transparent，把 img 设为 display: block，把 ul 的 padding-inline-start 和 list-style 全清空。这些规则生效不需要你写任何 class，只要 DOM 里有对应标签，就立刻覆盖。
- 老项目里没显式写
button { background: #007bff }？那它就变成透明底+黑边框 - 手写
.nav li { margin-left: 1rem }却发现列表项紧贴在一起？因为ul的原生缩进已被 Preflight 清掉 -
img在行内突然换行或基线偏移？display: block让它脱离文本流了 - 整个页面顶部“贴死”没有留白？
body { margin: 0 }直接干掉了浏览器默认的 8px 外边距
关 preflight 后为什么还是不对？
关闭 corePlugins.preflight: false 只是跳过 Tailwind 编译这部分 CSS，并不会“恢复浏览器默认样式”。浏览器原生样式（user agent stylesheet）还在，但某些现代布局赖以存在的基础规则（比如 * { box-sizing: border-box }）也跟着没了。
- 你关了 preflight，但没手动补
* { box-sizing: border-box }→ 宽度计算错乱，盒子撑出容器 -
ul没圆点、没缩进 → 因为 Preflight 清掉的那些规则，浏览器不会自动补回来 - 改完配置没重启开发服务器 → Vite/HMR 不会重生成 base 层 CSS，页面还是旧规则在跑
-
@tailwind base没放在 CSS 文件最顶部 → 被后续@import或@layer规则覆盖，Preflight 失效却无提示
和 UI 组件库冲突时最常踩的坑
Element Plus、Naive UI、Ant Design Vue 这些库都依赖浏览器默认行为或自己封装的标签语义。Tailwind 的 Preflight 一上来就把地基抽了，组件内部样式自然塌方。
立即学习“前端免费学习笔记（深入）”；
-
el-button背景色丢失，不是 class 名被覆盖，是button { background-color: transparent }先把底色清空了 -
el-input圆角消失，因为 Preflight 把input的border-radius、outline全设为初始值 - 用
prefix: 'tw-'但没改模板里的 class →class="p-4"还是匹配不到，工具类压根不生效 - 混用
tw-p-4和第三方组件的el-button类 → 前者走 Tailwind 规则，后者走组件库 CSS，padding 和背景互不影响，但开发者误以为能叠加
真正要动的不是“怎么让 Tailwind 少一点冲突”，而是明确接受一个事实：Preflight 是 Tailwind 的默认契约，想共存就得主动打破它——关掉、补漏、加前缀、用 twMerge，而且每一步改完都得重启 dev server，否则等于没改。
