Tailwind CSS - 预检

理解 Tailwind CSS Preflight

Tailwind CSS Preflight 是一套有主见的基准样式，它作为一种精密的 CSS 重置。它建立在流行的 modern-normalize 之上，旨在消除跨浏览器不一致性，并为你的样式提供一个干净、可预测的起点。当你在 CSS 中包含 @tailwind base 时，Preflight 会自动应用。

Preflight 的目的：一个干净的起点

想象一下，每个浏览器都会为 HTML 元素提供一套默认的“服装”（外边距、字体大小等）。这些“服装”在不同浏览器之间可能略有差异，导致不可预测的布局。Preflight 移除了所有这些默认样式，确保你看到的任何样式都是你通过 Tailwind 的工具类明确应用的。这可以防止你与浏览器的默认样式表“作斗争”，并带来更一致的设计。

示例：未样式化的 `<h1>`

在普通的 HTML 文档中，<h1> 标签默认是又大又粗的。而有了 Preflight，它看起来就像普通文本一样，直到你亲自为它添加样式。这是有意为之的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Preflight Demo</title>
</head>
<body class="p-8 font-sans">

  <h1>This heading looks like regular text.</h1>
  <h1 class="text-4xl font-bold">This one is styled with utilities.</h1>

</body>
</html>

Preflight 应用的关键样式

Preflight 应用了许多细微的重置。以下是一些最重要的内容：

移除默认外边距： 标题、段落和块引用（blockquotes）等元素的默认外边距被移除，因此你可以使用 m-4 或 my-2 等工具类一致地控制间距。
标题无样式： <h1> 到 <h6> 元素被重置为没有特殊的字体大小或字重。你必须使用字体大小和字重工具类来设置它们的样式。
列表无样式： <ul> 和 <ol> 列表的默认内边距和项目符号/编号被移除。使用 list-disc 和 list-inside 等列表工具类来重新添加它们。
图像为块级元素： <img>、<svg>、<video> 等元素被设置为 display: block;。这消除了它们在作为行内元素时有时出现在其下方的小间隙。
图像被约束： 图像和视频默认被设置为 max-width: 100%; 和 height: auto;，以防止它们溢出其父容器并保持其宽高比。
边框被重置： 所有元素默认都被赋予一个实心、0px、透明的边框。这意味着你只需添加一个像 border 这样的类，即可添加一个具有默认颜色的 1px 实心边框。

使用你自己的基础样式扩展 Preflight

如果你想为某些元素定义自己的默认样式（例如，将所有链接设置为特定颜色），你可以将自己的 CSS 添加到 base 层。这是现代且推荐的方法。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-semibold;
  }
  a {
    @apply text-blue-600 underline hover:text-blue-800;
  }
  /* 可访问性提示：确保列表内容能被屏幕阅读器正确播报 */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

禁用 Preflight

在极少数情况下，例如将 Tailwind 集成到现有 CSS 的老旧项目中时，你可能需要禁用 Preflight 以避免冲突。你可以在 tailwind.config.js 文件中执行此操作。

警告： 对于新项目，通常不建议禁用 Preflight，因为它是 Tailwind CSS 理念的核心部分。你将失去跨浏览器一致性的优势。

module.exports = {
  // ... 其他配置
  corePlugins: {
    preflight: false,
  }
}