Preflight

概述

Preflight 构建于 modern-normalize 之上，是一组为 Tailwind 项目设计的基础样式，旨在消除跨浏览器不一致性，并使您更轻松地在您的设计系统的约束范围内工作。

当您将 tailwindcss 导入到您的项目时，Preflight 会自动注入到 base 层

CSS

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

虽然 Preflight 中的大多数样式旨在不被注意——它们只是使事物的行为更符合您的预期——但有些样式更具风格倾向，并且在您初次遇到它们时可能会感到惊讶。

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

外边距被移除

Preflight 移除了所有元素（包括标题、块引用、段落等）的所有默认外边距

CSS

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

这使得您更难意外地依赖用户代理样式表应用的外边距值，而这些值不是您的间距比例的一部分。

边框样式被重置

为了便于通过简单添加 border 类来添加边框，Tailwind 使用以下规则覆盖了所有元素的默认边框样式

CSS

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

由于 border 类仅设置 border-width 属性，因此此重置确保添加该类始终添加使用 currentColor 的实线 1px 边框。

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

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

CSS

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

标题是无样式的

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

CSS

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

这样做的原因有两方面

它帮助您避免意外偏离您的排版比例。默认情况下，浏览器为标题分配的大小在 Tailwind 的默认排版比例中不存在，并且不保证在您自己的排版比例中存在。
在 UI 开发中，标题通常应该在视觉上被弱化。默认情况下使标题无样式意味着您应用于标题的任何样式都是有意识且刻意的。

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

列表是无样式的

默认情况下，有序列表和无序列表都是无样式的，没有项目符号或编号

CSS

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

如果您想为列表设置样式，您可以使用 list-style-type 和 list-style-position 实用程序来实现

HTML

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

您始终可以通过添加您自己的基础样式，将默认列表样式添加到您的项目中。

无障碍访问注意事项

无样式列表不会被 VoiceOver 宣布为列表。如果您的内容确实是列表，但您希望保持无样式，请向元素添加 "list" 角色

HTML

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

图像是块级元素

默认情况下，图像和其他替换元素（如 svg、video、canvas 等）是 display: block

CSS

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

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

如果您需要使这些元素中的任何一个成为 inline 而不是 block，只需使用 inline 实用程序

HTML

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

图像是受约束的

图像和视频被约束为父级宽度，并以保留其固有纵横比的方式进行约束

CSS

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

这可以防止它们溢出其容器并使其默认情况下具有响应性。如果您需要覆盖此行为，请使用 max-w-none 实用程序

HTML

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

扩展 Preflight

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

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"; 注入的内容

CSS

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

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

CSS

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

本页内容