预检 - Tailwind CSS 中文

概述

Preflight 建立在 modern-normalize 之上，它是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器差异，让您更容易在设计系统约束下工作。

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

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

@tailwind components;

@tailwind utilities;

虽然 Preflight 中的大多数样式都旨在不被注意——它们只是让事物表现得更符合预期——但有些样式更具意见性，当您第一次遇到它们时可能会感到意外。

要查看 Preflight 应用的所有样式的完整参考，请查看样式表.

默认边距已移除

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

列表没有样式

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

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 宣布为列表。如果您的内容确实是列表，但您想保持无样式，在元素中添加“list”角色

<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 覆盖 Preflight 样式来解决它们。

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

扩展 Preflight

如果你想在 Preflight 之上添加自己的基础样式，只需使用 `@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;

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

禁用 Preflight

如果你想完全禁用 Preflight - 也许是因为你正在将 Tailwind 集成到现有项目中，或者因为你想要提供自己的基础样式 - 你只需要在 `tailwind.config.js` 文件的 `corePlugins` 部分将 `preflight` 设置为 `false`。

tailwind.config.js

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

在此页面上