Tailwind Typography 插件

本文来自 TailwindLabs。我放置这篇文章是为了演示如何使用 AstroPaper 主题编写博客文章/文章。

默认情况下，Tailwind 从段落、标题、列表等中删除所有默认浏览器样式。这对于构建应用程序 UI 非常有用，因为您花费更少的时间撤消用户代理样式，但是当您_真正_只是想要样式化来自 CMS 中的富文本编辑器或 markdown 文件的某些内容时，这可能会令人惊讶和不直观。

我们实际上收到了很多投诉，人们经常问我们这样的问题：

为什么 Tailwind 删除了我的 h1 元素的默认样式？我如何禁用它？你说我也失去了所有其他基本样式是什么意思？ 我们听到了，但我们不相信简单地禁用我们的基本样式就是您真正想要的。您不想每次在仪表板 UI 的一部分中使用 p 元素时都必须删除烦人的边距。我也怀疑您真的希望您的博客文章使用用户代理样式 — 您希望它们看起来_很棒_，而不是糟糕。

@tailwindcss/typography 插件是我们试图给您_实际_想要的东西，而没有做一些愚蠢的事情（如禁用我们的基本样式）的任何缺点。

它添加了一个新的 prose 类，您可以将其应用于任何普通 HTML 内容块，并将其转换为一个美丽、格式良好的文档：

<article class="prose">
  <h1>加奶酪的蒜蓉面包：科学告诉我们什么</h1>
  <p>
    多年来，父母们一直向他们的孩子宣扬吃加奶酪的蒜蓉面包的健康益处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们通常会在万圣节打扮成温暖的奶酪面包。
  </p>
  <p>
    但最近的一项研究表明，这种著名的开胃菜可能与全国各地涌现的一系列狂犬病病例有关。
  </p>
  <!-- ... -->
</article>

有关如何使用插件及其包含的功能的更多信息，请阅读文档。

从这里开始会发生什么

从这里开始的只是一堆我为了狗粮插件本身而写的绝对废话。它包括我能想到的每一个合理的排版元素，如粗体文本、无序列表、有序列表、代码块、块引用，甚至斜体。

出于几个原因，涵盖所有这些用例很重要：

1. 我们希望所有内容开箱即用地看起来都很好。
2. 真的只是第一个原因，这就是插件的全部意义。
3. 这是第三个假装的原因，但一个有三个项目的列表看起来比一个有两个项目的列表更真实。

现在我们将尝试另一种标题样式。

排版应该很容易

所以这是一个标题 — 如果幸运的话，如果我们做得正确，那看起来会相当合理。

一位智者曾经告诉我关于排版的事情是：

如果您不想让您的东西看起来像垃圾，排版非常重要。把它做好，那么它就不会不好。 图像在这里默认看起来也很好可能也很重要：

现在我将向您展示一个无序列表的示例，以确保它看起来也不错：

• 所以这是这个列表中的第一项。
• 在这个例子中，我们保持项目简短。
• 稍后，我们将使用更长、更复杂的列表项。

这就是本节的结尾。

如果我们堆叠标题呢？

我们也应该确保这看起来不错。

有时您的标题直接在彼此下面。在这些情况下，您通常必须撤消第二个标题的顶部边距，因为标题彼此靠近通常比段落后跟标题看起来更好。

当标题出现在段落之后……

当标题出现在段落之后时，我们需要更多空间，就像我上面已经提到的那样。现在让我们看看更复杂的列表会是什么样子。

• 我经常做这种列表项有标题的事情。

  出于某种原因，我认为这看起来很酷，但不幸的是，因为要正确获得样式非常烦人。

  我在这些列表项中通常也有两三个段落，所以困难的部分是使段落、列表项标题和单独的列表项之间的间距都有意义。说实话很困难，你可以提出一个强有力的论据，你不应该这样写。

• 由于这是一个列表，我至少需要两个项目。

  我在前一个列表项中已经解释了我在做什么，但如果列表只有一个项目，它就不会是列表，我们真的希望这看起来很真实。这就是为什么我添加了第二个列表项，所以我在编写样式时实际上有东西可以看。

• 添加第三项也不是一个坏主意。

  我认为只使用两个项目可能没问题，但三个肯定不会更糟，而且由于我似乎没有问题编造要键入的任意内容，我不妨包括它。

在这种列表之后，我通常有一个结束陈述或段落，因为直接跳到标题看起来有点奇怪。

代码默认情况下应该看起来还可以。

我认为大多数人如果想要样式化他们的代码块，将使用 highlight.js 或 Prism 或其他东西，但让它们开箱即用地看起来_还可以_不会有什么坏处，即使没有语法高亮。

这是在撰写本文时默认 tailwind.config.js 文件的样子：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

希望这对您来说看起来足够好。

那么嵌套列表呢？

嵌套列表基本上总是看起来很糟糕，这就是为什么像 Medium 这样的编辑器甚至不让你这样做，但我想既然你们中的一些傻瓜会这样做，我们就必须承担至少让它工作的负担。

1. 嵌套列表很少是一个好主意。
   • 您可能觉得自己真的”有组织”或什么的，但您只是在屏幕上创建了一个难以阅读的毛病形状。
   • UI 中的嵌套导航也是一个坏主意，尽可能保持扁平。
   • 在源代码中嵌套大量文件夹也没有帮助。
2. 既然我们需要有更多项目，这里还有一个。
   • 我不确定我们是否会费心样式化两个级别以上。
   • 两个已经太多了，三个肯定是个坏主意。
   • 如果你嵌套四层深，你应该进监狱。
3. 两项并不真正是一个列表，三个是好的。
   • 如果您希望人们真正阅读您的内容，请不要嵌套列表。
   • 没有人想看这个。
   • 我很沮丧，我们甚至不得不费心样式化这个。

Markdown 中列表最烦人的事情是，除非列表项中有多个段落，否则 <li> 元素不会被赋予子 <p> 标签。这意味着我也必须担心样式化那个烦人的情况。

• 例如，这里还有一个嵌套列表。

  但这次有第二段。

  • 这些列表项不会有 <p> 标签
  • 因为它们每行只有一行

• 但在这第二个顶级列表项中，它们会。

  这特别烦人，因为这个段落的间距。

  • 正如您在这里所看到的，因为我添加了第二行，所以这个列表项现在有一个 <p> 标签。

    顺便说一下，这是我正在谈论的第二行。

  • 最后，这里还有另一个列表项，所以它更像一个列表。

• 一个结束列表项，但没有嵌套列表，为什么不呢？

最后一句话来结束这一节。

还有其他我们需要样式化的元素

我几乎忘记提到链接，像这个链接到 Tailwind CSS 网站。我们几乎让它们变成蓝色，但那是昨天的事了，所以我们选择了深灰色，感觉更前卫。

我们甚至包含了表格样式，看看：

我们还需要确保内联代码看起来不错，就像如果我想谈论 <span> 元素或告诉你关于 @tailwindcss/typography 的好消息。

有时我甚至在标题中使用 code

尽管这可能是一个坏主意，而且历史上我很难让它看起来不错。不过，这个_“在反引号中包装代码块”_的技巧确实效果很好。

我过去做过的另一件事是在链接中放置一个 code 标签，就像如果我想告诉你关于 tailwindcss/docs 存储库。我不喜欢反引号下面有下划线，但绝对不值得为了避免它而需要的疯狂。

我们还没有使用 h4

但现在我们有了。请不要在您的内容中使用 h5 或 h6，Medium 只支持两个标题级别是有原因的，你们这些动物。我真的考虑过使用 before 伪元素来对您尖叫，如果您使用 h5 或 h6。

我们开箱即用根本不样式化它们，因为 h4 元素已经很小了，它们与正文副本的大小相同。我们应该用 h5 做什么，让它_小于_正文副本吗？不，谢谢。

我们仍然需要考虑堆叠标题。

让我们确保我们也不会用 h4 元素搞砸它。

呼，如果幸运的话，我们已经样式化了这段文字上方的标题，它们看起来相当不错。

让我们在这里添加一个结束段落，这样事情就以相当大的文本块结束。我无法解释为什么我希望事情以这种方式结束，但我必须假设这是因为我认为如果标题太接近文档末尾，事情会看起来很奇怪或不平衡。

我在这里写的内容可能足够长了，但添加这最后一句话不会有什么坏处。