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 类就能轻松添加边框，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

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

Preflight

本页内容