Preflight

概述

基于 modern-normalize，Preflight 是一组用于 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 maps。

当您遇到这种情况时，可以通过使用自定义 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 之上添加自己的基础样式，请将它们添加到 CSS 中的 base 层中，使用 @layer base：

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

On this page