今天我們要發布 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>準備好試用看看了嗎？請查看排版外掛文件以了解更多資訊並開始使用。