今天,我们宣布推出 Tailwind CSS 排版插件 的下一个版本,它带来了便捷的暗黑模式支持、全新的自定义 API 以及我之前不确定是否能支持的 not-prose
类。
¥Today we're announcing the next version of the Tailwind CSS Typography plugin, which brings easy dark mode support, a brand new customization API, and the not-prose
class I wasn't sure we'd ever figure out how to support.
如需全面了解所有新功能,请查看我们 YouTube 通道上的 官方发布视频。
¥For a full tour of everything that's new, check out the official release video on our YouTube channel.
Tailwind CSS Typography v0.5 是为 Tailwind CSS v3.0 设计的,因此请确保你使用的是最新版本的 Tailwind,然后从 npm 安装新的插件版本:
¥Tailwind CSS Typography v0.5 is designed for Tailwind CSS v3.0, so make sure you're on the latest version of Tailwind, then install the new plugin release from npm:
npm install -D @tailwindcss/typography@latest
要了解有关该插件提供的所有功能的更多信息,请查看我们更新的 Typography 插件 文档。
¥To learn more about everything the plugin provides, check out our update typography plugin documentation.
便捷的暗黑模式支持(Easy dark mode support)
¥Easy dark mode support
我们添加了一个 prose-invert
类,你可以在暗黑模式下轻松切换字体颜色:
¥We've added a prose-invert
class you can use to easily swap out your typography colors in dark mode:
<body class="bg-white dark:bg-gray-900"> <article class="prose dark:prose-invert">{{ markdown }}</article></body>
暗黑主题由我们专业的设计团队手工打造,并会自动适应你使用的任何灰度。
¥The dark themes are hand-crafted by our expert design team, and automatically adapt to whatever gray scale you're using.
选择灰度(Pick your gray scale)
¥Pick your gray scale
Tailwind CSS v3.0 默认自带五种不同的灰度设置,更新后的排版插件包含每种灰度的类,让你可以轻松地将排版与网站的其他部分进行匹配:
¥Tailwind CSS v3.0 ships with five different sets of grays by default, and the updated typography plugin includes classes for each one, making it easy to match your typography to the rest of your site:
<article class="prose prose-slate">{{ markdown }}</article>
我们还简化了内部定义颜色主题的方式,方便你在需要时添加自己的颜色主题。
¥We've simplified how we define color themes internally too, which makes it easier to add your own if you need to.
查看 documentation 了解更多信息。
¥Check out the documentation to learn more.
基于 HTML 的自定义 API(HTML-based customization API)
¥HTML-based customization API
我们添加了大量修饰符,你可以直接在 HTML 中使用这些修饰符来调整散文样式中的特定元素:
¥We've added tons of modifiers you can use to tweak specific elements in your prose styles, directly in your HTML:
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600"> {{ markdown }}</article>
这使得你可以轻松执行诸如样式链接以匹配你的品牌、为图片添加边框半径等等操作。
¥This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more.
查看 元素修饰符 文档了解更多详情。
¥Check out the element modifiers documentation to learn more.
撤销散文风格(Undo prose styles)
¥Undo prose styles
你是否曾经需要在内容中间插入一些非内容的 HTML?现在,你可以使用 not-prose
包裹它,以确保散文样式不会干扰它:
¥Ever needed to stick some non-content HTML in the middle of your content? Now you can wrap that with not-prose
to make sure the prose styles don't interfere with it:
<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>
准备好尝试一下了吗?查看 Typography 插件文档 了解更多信息并开始使用。
¥Ready to try it out? Check out the typography plugin documentation to learn more and get started.