Preflight
概述
Preflight 基于 modern-normalize 构建，是 Tailwind 项目的一组基础样式，旨在消除跨浏览器不一致性，并使你更容易在你的设计系统的约束范围内工作。
当你将 tailwindcss 导入到你的项目中时，Preflight 会自动注入到 base 层：
@layer theme, base, components, utilities;
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/theme.css" layer(theme);
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/preflight.css" layer(base);
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/utilities.css" layer(utilities);
Preflight 中的大多数样式本应不被察觉——它们只是让元素表现得更加符合预期——但其中一些带有主观倾向性，初次遇到时可能令人惊讶。
有关 Preflight 应用的所有样式的完整参考，请 参阅样式表。
移除了外边距
Preflight 移除了所有元素的默认外边距，包括标题、块引用、段落等：
*,
::after,
::before,
::backdrop,
::file-selector-button {
margin: 0;
padding: 0;
}
这使得意外依赖用户代理样式表所应用的边距值变得很难，而这些值并不属于您的间距比例体系。
重置了边框样式
为了方便地通过简单地添加 border 类来添加边框，Tailwind 使用以下规则覆盖了所有元素的默认边框样式：
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
}
由于 border 类仅设置 border-width 属性，因此此重置确保添加该类始终添加使用 currentColor 的 1px 实线边框。
当集成某些第三方库（例如 Google 地图）时，这可能会导致一些意想不到的结果。
当你遇到这种情况时，你可以通过使用你自己的自定义 CSS 覆盖 Preflight 样式来解决这些问题：
@layer base {
.google-map * {
border-style: none;
}
}
标题没有样式
默认情况下，所有标题元素都完全没有样式，并且具有与普通文本相同的字体大小和粗细：
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
这样做的原因有两个：
- 它有助于你避免意外偏离你的排版比例。默认情况下，浏览器为标题分配的大小不存在于 Tailwind 的默认排版比例中，并且不能保证存在于你自己的排版比例中。
- 在 UI 开发中，标题通常应该在视觉上被弱化。默认情况下使标题没有样式意味着你应用于标题的任何样式都是有意识且刻意的。
你始终可以通过 添加你自己的基础样式 将默认的标题样式添加到你的项目中。
列表没有样式
默认情况下，有序列表和无序列表都没有样式，没有项目符号或编号：
ol,
ul,
menu {
list-style: none;
}
如果你想设置列表的样式，可以使用 list-style-type 和 list-style-position 工具类：
<ul class="list-inside list-disc">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
你始终可以通过 添加你自己的基础样式 将默认的列表样式添加到你的项目中。
可访问性注意事项
VoiceOver 不会将没有样式的列表 声明为列表。如果你的内容确实是一个列表，但你希望保持其没有样式，请向该元素 添加 "list" role：
<ul role="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
图像是块级元素
默认情况下，图像和其他替换元素（如 svg、video、canvas 等）是 display: block：
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
这有助于避免你经常在使用浏览器默认的 display: inline 时遇到的意外对齐问题。
如果你需要将其中一个元素设为 inline 而不是 block，只需使用 inline 工具类：
<img class="inline" src="..." alt="..." />
图像被约束
图像和视频被约束到父元素的宽度，同时保持其固有的纵横比：
img,
video {
max-width: 100%;
height: auto;
}
这可以防止它们溢出其容器，并使它们默认具有响应式。如果你需要覆盖此行为，请使用 max-w-none 工具类：
<img class="max-w-none" src="..." alt="..." />
扩展 Preflight
如果你想在 Preflight 的基础上添加你自己的基础样式，请使用 @layer base 将它们添加到你的 CSS 的 base CSS 层中：
@layer base {
h1 {
font-size: var(--text-2xl);
}
h2 {
font-size: var(--text-xl);
}
h3 {
font-size: var(--text-lg);
}
a {
color: var(--color-blue-600);
text-decoration-line: underline;
}
}
在 添加基础样式文档 中了解更多信息。
禁用 Preflight
如果你想完全禁用 Preflight——可能是因为你正在将 Tailwind 集成到现有项目中，或者你更喜欢定义自己的基础样式——你可以通过仅导入你需要的 Tailwind 部分来完成此操作。
默认情况下，这是 @import "tailwindcss"; 注入的内容：
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
要禁用 Preflight，只需省略其导入，同时保留其他所有内容：
@layer theme, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
- @import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);