Tailwind CSS 主页
返回

轻松排版，即使在暗黑模式下

日期

今天我们宣布了 Tailwind CSS Typography 插件 的下一个版本，它带来了轻松的暗黑模式支持、全新的自定义 API 以及 not-prose 类，我之前不确定我们是否能找到支持它的方法。

要全面了解所有新功能，请查看我们 YouTube 频道上的 官方发布视频。

Tailwind CSS Typography v0.5 是为 Tailwind CSS v3.0 设计的，因此请确保您使用的是最新版本的 Tailwind，然后从 npm 安装新的插件版本

npm install -D @tailwindcss/typography@latest

要详细了解插件提供的所有功能，请查看我们更新的 排版插件 文档。

轻松的暗黑模式支持

我们添加了一个 prose-invert 类，您可以使用它轻松地在暗黑模式下切换排版颜色

<body class="bg-white dark:bg-gray-900">
  <article class="prose dark:prose-invert">
    {{ markdown }}
  </article>
</body>

暗黑主题由我们的专业设计团队精心制作，并会自动适应您使用的任何灰度。

选择您的灰度

Tailwind CSS v3.0 默认情况下附带五组不同的灰色，更新后的排版插件包含每组的类，使您可以轻松地将排版与网站的其余部分匹配

<article class="prose prose-slate">
  {{ markdown }}
</article>

我们也简化了内部定义颜色主题的方式，这使得添加您自己的主题变得更加容易。

查看文档了解更多信息。

基于 HTML 的自定义 API

我们添加了许多修饰符，您可以直接在 HTML 中使用它们来调整散文样式中的特定元素。

<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
  {{ markdown }}
</article>

这使得您可以轻松地执行诸如将链接样式与您的品牌相匹配、为图像添加圆角等操作，以及更多其他操作。

查看元素修饰符文档了解更多信息。

撤销散文样式

您是否曾经需要在内容中间插入一些非内容 HTML？现在，您可以用not-prose将其包裹起来，以确保散文样式不会干扰它。

<article class="prose">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-prose">
    <!-- Some HTML that needs to be prose-free -->
  </div>

  <p>...</p>
  <!-- ... -->
</article>

准备尝试一下吗？查看排版插件文档了解更多信息并开始使用。