介绍 Tailwind CSS Typography

到目前为止，尝试使用 Tailwind 样式化文章、文档或博客文章一直是一项繁琐的任务，需要对排版有敏锐的洞察力，并且需要大量的复杂自定义 CSS。

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

实际上，我们收到了很多关于它的抱怨，人们经常问我们诸如

为什么 Tailwind 会删除我 h1 元素上的默认样式？如何禁用它？您是什么意思，我也会丢失所有其他基本样式？

我们听到了您的声音，但我们并不相信仅仅禁用我们的基本样式就是您真正想要的。您不希望每次在仪表板 UI 的一部分中使用 p 元素时都必须删除烦人的边距。而且我怀疑您是否真的希望您的博客文章使用用户代理样式——您希望它们看起来很棒，而不是糟糕。

这就是为什么今天我们很高兴发布 @tailwindcss/typography——一个插件，它为您提供您真正想要的，而不会有任何像禁用我们的基本样式这样的愚蠢行为的缺点。

它添加了一组新的 prose 类，您可以将它们添加到任何块级纯 HTML 内容中，并将其转换为美观、格式良好的文档

<article class="prose lg:prose-xl">
  <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>

那么它到底是什么样子的呢？好吧，您现在正在看它——我们使用它来样式化这个博客上的内容！

查看文档 以了解更多信息并立即尝试。

想谈谈这篇文章？在 GitHub 上讨论 →