排版示例

一、标题

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题

H6 标题

二、文本

markcodekeyboardunderlinedeletestrongsmallitaliclink

提示

音频、音乐

Legends Never Die

Against the Current

视频

三、综合示例

在使用 Tailwind，给文章、文档或者博客内容设置样式比较枯燥乏味，不仅要求你对排版有一定的审美，还要写很多 CSS。

默认情况下，Tailwind 会移除段落、标题、列表等浏览器默认样式。这有助于构建应用程序 UI，因为你不用再清除用户代理样式了，但在设置 CMS 富文本编辑器或 Markdown 文件内容样式时，就没那么直观高效了。

事实上，有不少人都在抱怨这一点，并经常问我们这样的问题：

为什么 Tailwind 移除了 h1 的默认样式？我该如何禁用它？所有其他基本样式也没了，为什么要这么做？

我们收到了相关反馈，但并不认为，简单地禁用基本样式可以解决问题。比如在仪表板 UI 中，你不想每次使用 p标签时都要移除烦人的边距。在博客文章中也不大可能使用用户代理样式 —— 你希望排版 好看，而不是乱糟糟的。

无需禁用基本样式，@tailwindcss/typography 插件带来你 真正 想要的。

你可以在 HTML 内容块上添加 prose 类，将其转换为漂亮、格式化后的文档：

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </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 的好消息。

有时甚至在标题中使用 代码

这可能是个坏主意，而且从过去来看，很难让它看起来不错。

过去我做过的另一件事是在链接中放代码标签，就像我想告诉您有关 tailwindcss/docs 存储库一样。

还没有使用 h4

现在有了。不要在内容中使用 h5 或 h6，出于某些原因，Medium 只支持两级标题。老实说，如果你使用 h5 或 h6，我建议你使用 before 伪元素。

我们没有设置它们的样式，因为 h4 标签已经很小了，以至于它们与正文大小相同。我们要如何处理 h5，使其小于正文​​？不，不会这样做。

我们还要考虑多个标题。

确保我们也不会把 h4 标签搞砸。

幸运的是，我们已经为上方的标题设置了样式，看起来还不错。

然后在这里添加一个段落，以大小合适的文本块作为结束。我无法解释为什么要以这种方式结束，可能是因为如果标题太靠近文档末尾，看起来就会很奇怪或不协调。

写到这，内容已经够多了，加上最后这句话也无关紧要。

段落

另一个段落