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

Adam Wathan

今天,我们宣布推出 Tailwind CSS 排版插件 的下一个版本,它带来了简单的暗黑模式支持、全新的自定义 API 以及我曾经不确定我们是否能够支持的 not-prose 类。

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

Tailwind CSS 排版插件 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>

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

直接在您的收件箱中获取我们所有的更新。
注册我们的新闻通讯。