预检 - 基础样式 - Tailwind CSS 中文文档

概述

基于 modern-normalize，预检是一套为 Tailwind 项目设计的基础样式，旨在消除跨浏览器的不一致性，使您能够更轻松地在设计系统的约束内进行工作。

当您将 tailwindcss 导入到项目中时，预检会自动注入到 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);

虽然预检中的大多数样式在设计上是为了使其不被察觉——它们只是使行为更符合您的预期——但有些样式更具观点，初次接触时可能会令人感到意外。

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

去掉边距

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

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 来覆盖预检样式：

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>一</li>
  <li>二</li>
  <li>三</li>
</ul>

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

可访问性考虑

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

HTML

<ul role="list">
  <li>一</li>
  <li>二</li>
  <li>三</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="..." />

扩展预检

如果您想在预检之上添加自己的基础样式，请在 CSS 中通过 @layer base 将它们添加到 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;
  }
}

了解更多信息，请查阅添加基础样式文档。

禁用预检

如果您想完全禁用预检——可能是因为您正在将 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);

要禁用预检，只需省略它的导入，同时保留其他内容：

CSS

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

预检

目录