Preflight本质是强制重置而非补充样式，它通过高优先级标签选择器（如button、ul、img）直接覆盖浏览器默认行为，例如button { background-color: transparent; }无需类名即可生效，导致UI库样式失效。
preflight 本质是强制重置，不是“补充样式”
它不是在你现有样式基础上加几条规则，而是用一套预设的、高优先级的标签选择器（button、ul、h1、img 等）直接覆盖浏览器默认行为。比如：button { background-color: transparent; } 这条规则不依赖任何类名，也不管你有没有写 .my-btn，只要页面里有 <button>，它就生效。
常见被重置却容易被忽略的元素行为
这些改动不会报错，但会悄悄破坏 UI 库或手写 CSS 的前提假设：
-
img被设为display: block→ 导致行内图片换行、文字基线偏移（尤其影响html2canvas截图） -
ul/ol的list-style、padding-inline-start、margin-block全被清空 → 列表变扁平、无缩进、无圆点 -
h1–h6字体大小/粗细被设为inherit→ Naive UI 或 Element Plus 的标题层级视觉失效 -
body的margin被清零 → 原有页面顶部突然“贴顶”，滚动条消失感明显 -
* { box-sizing: border-box }虽然合理，但若项目里已有部分元素显式设了content-box，就会计算错乱
为什么关掉 preflight 后还得手动补漏
关闭 corePlugins.preflight: false 只是跳过 Tailwind 编译那部分 CSS，不是“恢复浏览器默认”。浏览器原生样式仍存在，但某些现代布局依赖的 baseline（如 box-sizing）就没了：
- 不补
@layer base { * { box-sizing: border-box } }→padding和border会撑开宽度，布局偏移 - 不补
@layer base { ul, ol { list-style: revert; margin: revert; padding: revert; } }→ 列表还是没符号、没缩进 - 不重启 dev server → Vite/HMR 不会重新生成 CSS，改了配置也看不到效果
- 以为加了
prefix: 'tw-'就安全 → 它只改类名，对button标签选择器完全无效
最易被忽略的加载时机问题
Tailwind 的 @tailwind base 必须出现在你主 CSS 文件的最顶部，且必须由 PostCSS 解析。如果把它写在 @import 后面、或者放在 @layer components 之后，Preflight 规则可能被后续更具体的选择器覆盖——而这种覆盖不会报错，只会在某个按钮突然透明时才暴露出来。
立即学习“前端免费学习笔记（深入）”；
