Preflight

一套面向 Tailwind 项目的、带主张的基础样式。

概述

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 class 就能添加边框，Tailwind 用以下规则覆盖所有元素的默认边框样式：

CSS

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

由于 border class 只设置 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 utility：

HTML

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

你随时可以通过添加自己的基础样式 为项目加上默认列表样式。

无障碍方面的考虑

无样式列表不会被 VoiceOver 朗读为列表。如果内容确实是列表但你希望保持无样式，请给元素添加 list role：

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 时经常遇到的意外对齐问题。

如果需要把这类元素从 block 改成 inline，直接使用 inline utility 即可：

HTML

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

图片会受约束

图片和视频会被限制在父元素宽度内，同时保留固有宽高比：

CSS

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

这样可以防止它们溢出容器，并且默认就是响应式的。如果需要覆盖此行为，使用 max-w-none utility：

HTML

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

带 hidden 属性的元素保持隐藏

CSS

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

这会强制带有 hidden 属性的元素保持不可见，除非使用 hidden="until-found"。如果希望元素对用户可见，请移除 hidden 属性。

扩展 Preflight

如果想在 Preflight 之上添加自己的基础样式，请在 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;
  }
}

更多信息见添加基础样式文档。

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

逐个导入 Tailwind CSS 文件时，source()、theme()、prefix() 等功能应加在对应的导入上。

例如，源检测会影响生成的 utility，因此 source(…) 应加在 utilities.css 的导入上：

CSS

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities); 
@import "tailwindcss/utilities.css" layer(utilities) source(none); 

important 同样如此，它也会影响 utility：

CSS

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities); 
@import "tailwindcss/utilities.css" layer(utilities) important; 

同样，theme(static) 和 theme(inline) 会影响生成的主题变量，应放在 theme.css 的导入上：

CSS

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme); 
@import "tailwindcss/theme.css" layer(theme) theme(static); 
@import "tailwindcss/utilities.css" layer(utilities);

最后，使用 prefix(tw) 添加前缀会影响 utility 和变量，因此应加在两处导入上：

CSS

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme); 
@import "tailwindcss/utilities.css" layer(utilities); 
@import "tailwindcss/theme.css" layer(theme) prefix(tw); 
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);