到目前為止，嘗試使用 Tailwind 為文章、文件或部落格文章設定樣式是一項繁瑣的任務，需要對排版有敏銳的眼光以及許多複雜的自訂 CSS。
預設情況下，Tailwind 會移除段落、標題、清單等所有預設瀏覽器樣式。這對於建立應用程式 UI 很有用，因為您可以減少花費在還原使用者代理樣式的時間，但是當您真的只是想為來自 CMS 中的 RTF 編輯器或 markdown 檔案的一些內容設定樣式時，它可能會令人感到驚訝且不直觀。
實際上，我們收到很多關於此的抱怨，人們經常問我們類似以下的問題
為什麼 Tailwind 會移除我的
h1元素上的預設樣式？我該如何停用這個功能？你說我會失去所有其他基本樣式是什麼意思？
我們聽到了你們的聲音，但我們不認為只是停用我們的基本樣式是你們真正想要的。您不希望每次在儀表板 UI 中使用 p 元素時都必須移除煩人的邊距。而且我懷疑您真的希望您的部落格文章使用使用者代理樣式 — 您希望它們看起來很棒，而不是很糟糕。
這就是為什麼今天我們很高興發布 @tailwindcss/typography — 一個外掛程式，它為您提供真正想要的東西，而不會像停用我們的基本樣式那樣做一些愚蠢的事情而造成任何負面影響。
它新增了一組新的 prose 類別，您可以將其應用於任何純 HTML 內容區塊，並將其轉換為美觀且格式良好的文件
<article class="prose lg:prose-xl"> <h1>Garlic bread with cheese: What the science tells us</h1> <p> For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween. </p> <p> But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country. </p> <!-- ... --></article>那它實際上看起來如何？嗯，您現在正在看 — 我們使用它來設定此部落格上的內容樣式！
查看文件以了解更多資訊並立即嘗試使用。
想討論這篇文章嗎？在 GitHub 上討論此問題 →