13. Preflight：样式重置基础

你写了一个 <h1>，没加任何类名，发现它没有加粗、字号也变小了。这不是 bug，是 Preflight 干的。

什么是 Preflight

Preflight 是 Tailwind 内置的一套基础样式重置，基于 modern-normalize。它的目标是：抹平浏览器之间的默认样式差异，让你在一致的基础上开始写样式。

当你写 @import "tailwindcss"; 时，Preflight 会自动注入到 base 层。

Preflight 做了什么

1. 清除所有 margin

*, ::after, ::before, ::backdrop, ::file-selector-button {
  margin: 0;
  padding: 0;
}

所有元素（包括标题、段落、列表）的内外边距归零。你看到的 <h1> 不再有大字号和加粗，因为浏览器默认样式被清掉了。

好处：你不会意外依赖浏览器默认的 margin 值，所有间距都是你显式写的。

2. 边框重置

*, ::after, ::before {
  box-sizing: border-box;
  border: 0 solid;
}

所有元素的边框变成 0 solid，border-style 默认 solid。这样你写 border 类就相当于 border-width: 1px，不需要再指定样式。

3. 标题无样式

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

所有标题继承父元素的字号和字重，看起来跟普通文字一样。

为什么这样设计？因为浏览器默认的标题字号（h1 2em、h2 1.5em 等）不在 Tailwind 的类型刻度里。让标题无样式，你再用 text-2xl font-bold 显式定义，更可控。

4. 列表无样式

ol, ul, menu {
  list-style: none;
}

列表前面的圆点/数字没了。需要的话用 list-disc、list-decimal 加回来：

<ul class="list-inside list-disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

5. 图片块级化

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

图片默认 display: block，避免行内图片底部出现空隙。想恢复行内行为用 inline 类。

6. 图片自适应

img, video {
  max-width: 100%;
  height: auto;
}

图片不会溢出容器，自动保持宽高比。想覆盖用 max-w-none。

扩展 Preflight

想给所有标题加个默认样式？在 CSS 里用 @layer base：

@layer base {
  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
  }
  h2 {
    font-size: var(--text-xl);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

禁用 Preflight

如果你把 Tailwind 引入一个已有项目，Preflight 可能跟现有样式冲突。可以只导入需要的部分：

@import "tailwindcss/theme.css" layer(theme);
/* 不引入 preflight.css */
@import "tailwindcss/utilities.css" layer(utilities);

这样工具类还能用，但基础重置不会生效。

下一章我们学自动内容检测。