Preflight 预检功能

Tailwind 项目的一组预设样式，可以快速生成具有相同设计语言的组件。

预检建立在 modern-normalize 之上，是一组用于 Tailwind 项目的基本样式，旨在消除跨浏览器的不一致，并使您更轻松地在设计系统的约束下工作。

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

@tailwind base; /* Preflight 将在此处注入 */
@tailwind components;
@tailwind utilities;

虽然 Preflight 中的大多数风格都是为了不被注意——它们只是让事情表现得更像你所期望的——但有些风格更固执己见，当你第一次遇到它们时可能会感到惊讶。

有关印前检查应用的所有样式的完整参考，请参阅样式表。

删除默认边距

开始前检查会从标题、块引号、段落等元素中删除所有默认边距。

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

这样一来，就更难意外地依赖用户代理样式表应用的边距值，而这些边距值不属于您的间距刻度。

标题无样式

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

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

原因有两点：

• 它可以帮助您避免意外偏离您的类型比例。默认情况下，浏览器会为 Tailwind 的默认类型比例中不存在的标题分配大小，并且不能保证在您自己的类型比例中存在。
• 在 UI 开发中，标题通常应该在视觉上不被强调。默认情况下，使标题不带样式意味着您应用于标题的任何样式都是有意识地和有意的。

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

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

列表无样式

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

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

如果要设置列表样式，可以使用 list-style-type 和 list-style-position 实用程序：

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

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

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

可访问性考虑

无样式列表不会被VoiceOver认为是列表。如果您的内容确实是一个列表，但您想保持它无样式，请为元素添加一个“列表”角色：

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

边框样式全局重置

为了通过简单地添加 border 类来轻松添加边框，TailWind 使用以下规则覆盖所有元素的默认边框样式：

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

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

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

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

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

扩展预检功能

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

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

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

禁用预检功能

如果您想完全禁用预检功能--也许是因为您要将Tailwind集成到现有项目中，或者是因为您想提供自己的基本样式--您只需在 tailwind.config.js 文件的 corePlugins 部分将 preflight 设置为 false 即可：

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