Tailwind CSS - 预设样式

Tailwind CSS **预设样式** 是 Tailwind 项目的基础样式。它用于简化不同浏览器上的样式或效果。如果我们包含 **`@tailwind base`**，它将自动注入这些样式。

Tailwind CSS 预设样式的目的

所有标签都带有一些预定义的样式。预设样式消除了依赖用户代理样式表中应用的样式（这些样式不属于您的间距比例）的依赖性。预设样式用于从这些元素中删除这些样式。例如，标题标签中的字体大小在标签内定义。此预设样式会将其移除，并将 `

` 元素内容保留为普通文本。预设样式中有一些旨在不被注意的样式。

示例

在下面的示例中，您将看到创建了一个 h1 元素，但输出与您预期的不一样。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <h1>Tailwind CSS<h1>
</body>

</html>

预设样式应用的样式

预设样式应用了很多样式，在这篇文章中，我们将仅描述重要的样式，完整的参考，您可以查看此链接。

删除默认外边距
标题无样式
列表无样式
媒体元素为块级元素
图片受限于父元素宽度
全局重置边框样式

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

删除默认外边距

HTML 中有很多元素包含一些外边距，但是此预设样式将通过删除该外边距使其成为普通元素。例如标题、块引用、段落、预格式文本等元素。

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

标题无样式

在 Tailwind CSS 中，所有标题元素都没有样式，要定义所需的文本样式，您必须使用不同的类。

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

列表无样式

预设样式会去除有序列表和无序列表的样式。它也移除了外边距、内边距、项目符号和编号。无样式列表不会被 VoiceOver 宣布为列表。如果内容确实是列表，但我们希望保持其无样式，我们需要向元素添加“list”角色。

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

媒体元素为块级元素

所有媒体元素（如图像、视频、画布等）都没有样式。它们都是块级元素，并垂直居中对齐。

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

图片受限于父元素宽度

图像和视频的宽度将基于父元素的宽度设置。要设置宽度，您需要使用所需的 Tailwind CSS 类手动设置它。

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

全局重置边框样式

预设样式会覆盖所有元素的默认边框样式。这使得只需使用 border 类即可轻松添加边框。

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

扩展预设样式

如果我们想在 Tailwind CSS 预设样式之上添加我们自己的基础样式，那么我们可以使用 **`@tailwind base`** 指令定义我们自己的 CSS。

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  a {
    @apply text-green-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

禁用预设样式

如果我们想在一个现有项目中使用 Tailwind CSS，那么我们应该禁用预设样式，否则它会移除某些样式，例如标题的外边距、字体大小等。要禁用预设样式，请转到您的 **`tailwind.config.js`** 文件，并将 **`preflight`** 设置为 **`false`**，位于 **`corePlugins`** 部分内部。

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

打印页面