预检 - 基础样式 - Tailwind CSS 框架

概述

Preflight 基于 modern-normalize 构建，是一组针对 Tailwind 项目的基础样式，旨在消除跨浏览器不一致性，并使您更容易在设计系统的约束下工作。

当您将 tailwindcss 导入到您的项目中时，Preflight 会自动注入到 base 层

CSS

@layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./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 层

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 "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);

要禁用 Preflight，只需省略其导入，同时保留其他所有内容

CSS

@layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);

预检

本页内容