预检

概述(Overview)

Preflight 构建在 modern-normalize 之上，是一套用于 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并让你在设计系统的约束下更轻松地工作。

🌐 Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

当你将 tailwindcss 导入到你的项目中时，Preflight 会自动注入到 base 图层中：

🌐 When you import tailwindcss into your project, Preflight is automatically injected into the base layer:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

虽然 Preflight 中的大多数样式都旨在不引人注意 - 它们只是让事物表现得更像你期望的那样 - 但有些样式更具主观性，当你第一次遇到它们时可能会感到惊讶。

🌐 While most of the styles in Preflight are meant to go unnoticed—they simply make things behave more like you'd expect them to—some are more opinionated and can be surprising when you first encounter them.

有关 Preflight 应用的所有样式的完整参考，请查看样式表。

🌐 For a complete reference of all the styles applied by Preflight, see the stylesheet.

边距已删除(Margins are removed)

Preflight 从所有元素（包括标题、块引用、段落等）中删除所有默认边距：

🌐 Preflight removes all of the default margins from all elements including headings, blockquotes, paragraphs, etc:

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

这使得意外依赖用户代理样式表应用的不属于间距比例的边距值变得更加困难。

🌐 This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale.

边框样式已重置(Border styles are reset)

为了能够通过简单地添加 border 类来轻松添加边框，Tailwind 对所有元素的默认边框样式进行了以下覆盖规则：

🌐 In order to make it easy to add a border by simply adding the border class, Tailwind overrides the default border styles for all elements with the following rules:

*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box;  border: 0 solid;}

由于 border 类只设置了 border-width 属性，这个重置确保了添加该类时总是会添加使用 currentColor 的实心 1px 边框。

🌐 Since the border class only sets the border-width property, this reset ensures that adding that class always adds a solid 1px border that uses currentColor.

在集成某些第三方库时，这可能会导致一些意外的结果，例如 Google 地图。

🌐 This can cause some unexpected results when integrating certain third-party libraries, like Google maps for example.

当你遇到这种情况时，你可以通过使用你自己的自定义 CSS 覆盖预检样式来解决这些问题：

🌐 When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS:

@layer base {  .google-map * {    border-style: none;  }}

标题没有样式(Headings are unstyled)

默认情况下，所有标题元素均完全未设置样式，并且具有与普通文本相同的字体大小和粗细：

🌐 All heading elements are completely unstyled by default, and have the same font size and weight as normal text:

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

这样做的原因有两个：

🌐 The reason for this is two-fold:

• 它可以帮助你避免无意中偏离你的字体刻度。默认情况下，浏览器会为标题分配在 Tailwind 默认字体刻度中不存在的大小，而且这些大小在你自己的字体刻度中也不一定存在。
• 在用户界面开发中，标题通常应该在视觉上被弱化。默认情况下不对标题进行样式设置意味着你对标题所做的任何样式调整都是有意识且经过深思熟虑的。

你可以通过添加自己的基础样式随时为你的项目添加默认的标题样式。

🌐 You can always add default header styles to your project by adding your own base styles.

列表没有样式(Lists are unstyled)

有序和无序列表默认无样式，没有项目符号或数字：

🌐 Ordered and unordered lists are unstyled by default, with no bullets or numbers:

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

如果你想为列表设置样式，可以使用 list-style-type 和 list-style-position 工具：

🌐 If you'd like to style a list, you can do so using the list-style-type and list-style-position utilities:

<ul class="list-inside list-disc">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

你可以通过添加自己的基础样式随时为你的项目添加默认列表样式。

🌐 You can always add default list styles to your project by adding your own base styles.

可访问性注意事项(Accessibility considerations)

无样式列表不会被 VoiceOver 宣告为列表。如果你的内容确实是列表，但你希望保持无样式，请为该元素添加“列表”角色：

🌐 Unstyled lists are not announced as lists by VoiceOver. If your content is truly a list but you would like to keep it unstyled, add a "list" role to the element:

<ul role="list">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

图片是块级的(Images are block-level)

图片和其他替换元素（例如 svg、video、canvas 等）默认由 display: block 替代：

🌐 Images and other replaced elements (like svg, video, canvas, and others) are display: block by default:

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

这有助于避免在使用浏览器默认的 display: inline 时经常遇到的意外对齐问题。

🌐 This helps to avoid unexpected alignment issues that you often run into using the browser default of display: inline.

如果你需要将这些元素之一从 block 改为 inline，只需使用 inline 工具即可：

🌐 If you ever need to make one of these elements inline instead of block, simply use the inline utility:

<img class="inline" src="..." alt="..." />

图片受到限制(Images are constrained)

图片和视频以保留其固有方面的方式限制在父级宽度内比率：

🌐 Images and videos are constrained to the parent width in a way that preserves their intrinsic aspect ratio:

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

这可以防止它们溢出容器，并默认使它们具有响应性。如果你需要覆盖此行为，请使用 max-w-none 工具类：

🌐 This prevents them from overflowing their containers and makes them responsive by default. If you ever need to override this behavior, use the max-w-none utility:

<img class="max-w-none" src="..." alt="..." />

具有 hidden 属性的元素保持隐藏(Elements with a hidden attribute stay hidden)

[hidden]:where(:not([hidden="until-found"])) {  display: none !important;}

这确保带有 hidden 属性的元素保持不可见，除非使用 hidden="until-found"。如果你希望元素对用户可见，请移除 hidden 属性。

🌐 This enforces that elements with a hidden attribute stay invisible unless using hidden="until-found". Remove the hidden attribute if you want an element to be visible to the user.

扩展预检(Extending Preflight)

如果你想在 Preflight 的基础上添加自己的基础样式，可以使用 @layer base 将它们添加到 CSS 中的 base CSS 层：

🌐 If you'd like to add your own base styles on top of Preflight, add them to the base CSS layer in your CSS using @layer base:

@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;  }}

在添加基础样式文档中了解更多信息。

🌐 Learn more in the adding base styles documentation.

禁用预检(Disabling Preflight)

如果你希望完全禁用 Preflight（可能是因为你正在将 Tailwind 集成到现有项目中，或者你更愿意定义自己的基本样式），你可以通过仅导入所需的 Tailwind 部分来实现。

🌐 If you'd like to completely disable Preflight—perhaps because you're integrating Tailwind into an existing project or you'd prefer to define your own base styles—you can do so by importing only the parts of Tailwind that you need.

默认情况下，@import "tailwindcss"; 会注入以下内容：

🌐 By default, this is what @import "tailwindcss"; injects:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

要禁用 Preflight，只需省略其导入，同时保留其他所有内容：

🌐 To disable Preflight, simply omit its import while keeping everything else:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

在单独导入 Tailwind CSS 文件时，像 source()、theme() 和 prefix() 这样的功能应该放在各自的导入中。

🌐 When importing Tailwind CSS' files individually, features like source(), theme(), and prefix() should go on their respective imports.

例如，源检测会影响生成的工具，因此应将 source(…) 添加到 utilities.css 导入中：

🌐 For example, source detection affects generated utilities, so source(…) should be added to the utilities.css import:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none);

important 也是如此，它同样会影响实用工具：

🌐 The same goes for important, which also affects utilities:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) important;

类似地，theme(static) 和 theme(inline) 会影响生成的主题变量，应放在 theme.css 导入中：

🌐 Similarly, theme(static) and theme(inline) affect the generated theme variables and should be placed on the theme.css import:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities);

最后，使用 prefix(tw) 前缀会影响工具和变量，因此它应该同时用于两个导入：

🌐 Finally, using a prefix with prefix(tw) affects the utilities and variables, so it should go on both imports:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);