预检 - 基础样式 - 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 maps。

当你遇到这种情况时，你可以通过使用自定义 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 时经常遇到的意外对齐问题。

如果你需要将这些元素中的任何一个从 block 改为 inline，只需使用 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="..." />

扩展预检

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

Learn more in the adding base styles documentation.

禁用预检

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

预检

On this page