预检 - 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 默认字体刻度中不存在的大小，而且这些大小在你自己的字体刻度中也不一定存在。
在用户界面开发中，标题通常应该在视觉上被弱化。默认情况下不对标题进行样式设置意味着你对标题所做的任何样式调整都是有意识且经过深思熟虑的。

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

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

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

🌐 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/typography 插件。

🌐 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 宣告为列表。如果你的内容确实是列表，但你希望保持无样式，请为该元素添加“列表”角色：

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

在集成某些第三方库时，这可能会导致一些意外的结果，例如 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:

.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 集成到一个现有项目中，或者因为你想提供自己的基础样式——你只需要在你的 tailwind.config.js 文件的 corePlugins 部分将 preflight 设置为 false:

🌐 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,
  }
}

目录