Tailwind CSS - Preflight
Tailwind CSS Preflight 是 Tailwind 项目的基础样式。它用于简化在不同浏览器上的样式设置或效果。如果我们添加 '@tailwind base'，它将自动注入样式。
Tailwind CSS Preflight 的用途
所有标签都带有一些预定义的样式。Preflight 消除了对用户代理样式表所应用的、不属于间距比例的样式的依赖。Preflight 用于从这些元素中删除这些样式。与标题标签一样，font-size 是在标签内定义的。此预检将删除该属性，并将 <h1> 元素内容保留为普通文本。 Preflight 中有一些样式是故意不被注意的。
示例
在下面的示例中，您将看到创建了一个 h1 元素，但输出与您预期的不同。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1>Tailwind CSS<h1>
</body>
</html>
Preflight 应用的样式
Preflight 应用了许多样式，本文仅介绍其中重要的样式。完整参考请参见此链接。
默认边距已移除
HTML 中有很多元素保留一定边距，但此 Preflight 会通过移除这些边距使其恢复正常。例如标题、区块引用、段落、pre 等元素。
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;
}
列表无样式
Preflight 会删除有序列表和无序列表的样式。它还会删除外边距、内边距、项目符号和数字。VoiceOver 不会将无样式列表读为列表。如果内容确实是一个列表，但我们希望保持其无样式，则需要为元素添加"列表"角色。
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;
边框样式全局重置
Preflight 会覆盖所有元素的默认边框样式。这使得只需使用 border 类即可轻松添加。
*,
::before,
::after {
border-width: 0;
border-style: solid;
border-color: theme('borderColor.DEFAULT', currentColor);
}
扩展 Preflight
如果我们想在 Tailwind CSS Preflight 的基础上添加自己的基础样式，可以使用 '@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;
禁用 Preflight
如果我们想在现有项目中使用 Tailwind CSS，则应禁用 Preflight，除非它会移除某些样式，例如边距、标题的字体大小等。要禁用 Preflight，请转到 'tailwind.config.js' 文件，并在 'corePlugins' 部分内将 'preflight' 设置为 'false'。
module.exports = {
corePlugins: {
preflight: false,
}
}
