预检 - Tailwind CSS 中文网

概述

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.

当你在 CSS 中包含 @tailwind base 时，Tailwind 会自动注入这些样式：

¥Tailwind automatically injects these styles when you include @tailwind base in your CSS:

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind 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.

默认边距已删除

¥Default margins are removed

Preflight 从标题、块引用、段落等元素中删除所有默认边距。

¥Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 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.

标题没有样式

¥Headings are unstyled

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

¥All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.

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

这样做的原因有两个：

¥The reason for this is two-fold:

它可以帮助你避免意外偏离字体比例。默认情况下，浏览器将大小分配给 Tailwind 的默认字体比例中不存在的标题，并且不能保证在你自己的字体比例中存在。

¥It helps you avoid accidentally deviating from your type scale. By default, browsers assign sizes to headings that don’t exist in Tailwind’s default type scale, and aren’t guaranteed to exist in your own type scale.
在 UI 开发中，标题通常应该在视觉上不被强调。默认情况下使标题无样式意味着你对标题应用的任何样式都是有意识和故意发生的。

¥In UI development, headings should often be visually de-emphasized. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.

你始终可以通过添加自己的基本样式将默认标题样式添加到你的项目中。

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

如果你想有选择地将合理的默认标题样式引入页面的文章样式部分，我们推荐 @tailwindcss/排版插件。

¥If you’d like to selectively introduce sensible default heading styles into article-style parts of a page, we recommend the @tailwindcss/typography plugin.

列表没有样式

¥Lists are unstyled

默认情况下，有序和无序列表是无样式的，没有项目符号/数字，也没有边距或填充。

¥Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

如果你想设置列表样式，可以使用 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-disc list-inside">
  <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.

如果你想有选择地将默认列表样式引入页面的文章样式部分，我们推荐 @tailwindcss/排版插件。

¥If you’d like to selectively introduce default list styles into article-style parts of a page, we recommend the @tailwindcss/typography plugin.

可访问性注意事项

¥Accessibility considerations

无样式列表是没有被 VoiceOver 宣布为列表。如果你的内容确实是一个列表，但你希望保持其无样式，请将添加 “list” 角色添加到该元素：

¥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.

如果你需要将这些元素之一设为 inline 而不是 block，只需使用 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 to the parent width

图片和视频以保留其固有纵横比的方式被限制在父级宽度内。

¥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="...">

全局重置边框样式

¥Border styles are reset globally

为了通过简单地添加 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:

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

由于 border 类仅设置 border-width 属性，此重置可确保添加该类始终使用你配置的默认边框颜色添加实心 1px 边框。

¥Since the border class only sets the border-width property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color.

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

¥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:

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

扩展预检

¥Extending Preflight

如果你想在 Preflight 之上添加自己的基本样式，只需使用 @layer base 指令将它们添加到你的 CSS 中：

¥If you’d like to add your own base styles on top of Preflight, simply add them to your CSS using the @layer base directive:

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

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

¥Learn more in the adding base styles documentation.

禁用预检

¥Disabling Preflight

如果你想完全禁用 Preflight（可能是因为你要将 Tailwind 集成到现有项目中或者因为你想提供自己的基本样式），你所需要做的就是在项目的 corePlugins 部分中将 preflight 设置为 false。 tailwind.config.js 文件：

¥If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file:

tailwind.config.js

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

目录