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 上讨论 →