【转载】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>

想了解插件的更多使用方法及内置功能，可以阅读文档。

从这里开始的后续内容

下面是一堆我为了测试这个插件自己写的废话。它包含了我能想到的所有合理的排版元素，如粗体文本、无序列表、有序列表、代码块、引用块、斜体，甚至还有斜体。

列出这些用例很重要，原因有几个：

我们希望一切开箱即有好效果。
说实话主要就是第一条，这才是插件的全部意义。
三个条目的列表比两个条目看起来更真实，所以这是第三个假理由。

现在开始测试另一种标题样式。

排版应该简单

这就是标题的样子——如果我们的工作做到位了，它看起来应该相当合理。

有个智者曾告诉我关于排版的事：

排版真的很重要，你要是做不好就会看起来很糟糕。做好它就不会糟糕。图片默认情况下也应该看起来不错：

与普遍看法相反，Lorem Ipsum 并不是随机文本。它源自公元前 45 年的一部拉丁文学著作，距今已有两千多年的历史。

现在来看一个无序列表的例子，确保它看起来也不错：

这是列表中的第一个条目。
这个例子中我们保持条目简短。
后面会有更长、更复杂的列表条目。

这就是这个部分的内容了。

如果标题堆叠呢？

我们也应该确保这看起来没问题。

有时候标题会直接连在一起。这种情况下你通常需要撤销第二个标题的顶部外边距，因为标题之间比段落加标题更紧凑一些会更好看。

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

当标题出现在段落之后时，需要多一点间距，就像上文提到的那样。现在来看看更复杂的列表是什么样子。

列表条目通常会带标题。

某种程度上我觉得这看起来很酷，可惜样式调好还挺费劲的。

这种列表条目里通常有两到三段，所以最难的是让段落间距、列表标题和独立列表条目之间的关系都合理。说实话挺难的，你要是想这样做也可以，但确实有充分理由不这样做。
既然是列表，至少需要两个条目。

上一条我已经解释过了，但如果列表只有一个条目就不叫列表了，我们确实希望它看起来真实一些。所以我加了这个第二个条目，这样写样式的时候能看到东西。
加第三个条目也不是坏主意。

两条可能也够了，但三条肯定也不差。既然我能现编出这么多内容，不如加上。

这种列表之后我通常会写一个结束语或段落，因为直接跳到标题看起来怪怪的。

代码默认情况下应该看起来不错。

我觉得大多数人如果要给代码块加样式，会用 highlight.js 或 Prism 之类的工具，但不妨让代码块在没有任何语法高亮的情况下也看起来”还行”。

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

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

希望这看起来够好了。

嵌套列表呢？

嵌套列表基本上看起来都很糟糕——这就是 Medium 这样的编辑器根本不让你做嵌套的原因。但我猜你们这些家伙非要这样做，我们也只能承担让它能正常工作的负担了。

嵌套列表很少是好主意。
- 你可能觉得自己很”有条理”，但你只是在屏幕上制造了一个难以阅读的怪异形状。
- UI 中的嵌套导航也是坏主意，尽量保持扁平。
- 在源代码中嵌套大量文件夹也没有帮助。
既然需要更多条目，再来一个。
- 我不确定我们会费心给超过两层深度加样式。
- 两层已经太多了，三层肯定是不行的。
- 嵌套四层的人应该被关起来。
两个条目不算列表，三个才行。
- 再强调一遍，如果你想让人真的读你的内容，就别嵌套列表了。
- 没人想看这个。
- 我很生气我们居然要费力处理这个。

Markdown 列表最烦人的是：除非列表条目里有多段文字，否则 <li> 元素不会自带子 <p> 标签。这意味着我还要操心处理这种情况的样式。

比如，再来一个嵌套列表。

但这次有第二段。
- 这些列表条目不会有 <p> 标签
- 因为每条只有一行
但在这个第二个顶级列表条目中，会有的。

特别烦人的是这段文字的间距。
- 正如你在这里看到的，因为我加了第二行，这个列表条目现在有了 <p> 标签。
  
  这是我说的第二行，顺便说一句。
- 最后再来一个列表条目，让它更像一个列表。
一个结束列表条目，没有嵌套列表，为什么不呢？

最后再来一句话结束这部分。

其他需要样式的元素

差点忘了说链接，比如这个链接到 Tailwind CSS 网站的链接。我们差点做成蓝色，但那是昨天的事了，所以我们选了深灰色，更有棱角。

我们还内置了表格样式，看：

摔角选手	出生地	终结技
布雷特·“杀手”·哈特	卡尔加里，AB	Sharpshooter
冷石·史蒂夫·奥斯汀	奥斯汀，TX	Stone Cold Stunner
兰迪·萨维奇	萨拉索塔，FL	Elbow Drop
瓦德	博尔德，CO	Vader Bomb
剃刀·拉蒙	丘洛塔，FL	Razor’s Edge

我们还要确保行内代码看起来不错，比如我想聊 <span> 元素，或者告诉你关于 @tailwindcss/typography 的好消息。

有时我在标题里也用 `code`

尽管这可能不是好主意，而且历史上我一直很难把它做好。不过这个”用反引号包住代码块”的技巧效果还不错。

另一件事是我以前做过把 code 标签放在链接里，比如如果我想告诉你关于 tailwindcss/docs 这个仓库的事。我不太喜欢反引号下面有下划线，但为了避免这种情况所需的疯狂程度，完全不值得。

我们还没用过 `h4`

但现在用到了。请不要用 h5 或 h6，Medium 只支持两级标题是有原因的，混蛋们。我甚至考虑过用 before 伪元素在你用 h5 或 h6 的时候对你大吼大叫。

我们开箱不对它们做任何样式处理，因为 h4 元素已经很小了，和正文字号一样大。我们对 h5 还能做什么呢？把它做得比正文还小？不了谢谢。

但我们仍然要考虑堆叠标题的情况。

确保我们用 `h4` 也不会搞砸它。

好了，运气好的话我们样式化了你上面看到的标题，看起来还不错。

在这里加一个结束段落，这样结尾有一大块文字，事情会看起来更完整。我说不清为什么我想让事情以这种方式结束，但我猜是因为如果结尾离标题太近的话，我觉得看起来会很奇怪或不平衡。

我写的这些大概已经够长了，但加上最后这句话应该没坏处。