今天我们发布了 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>
准备好尝试了吗?查看排版插件文档以了解更多信息并开始使用。