在此之前,使用 Tailwind 来给文章、文档或博客文章设置样式一直是一项繁琐的任务,需要对排版有敏锐的直觉并编写大量复杂的自定义 CSS。
默认情况下,Tailwind 会移除浏览器对段落、标题、列表等元素的所有默认样式。这在构建应用程序 UI 时非常有用,因为你花在覆盖用户代理样式的时间更少,但当你真的只是想为 CMS 中富文本编辑器或 markdown 文件中的内容设置样式时,这可能会令人困惑且不直观。
我们实际上收到很多关于这方面的投诉,人们经常问我们这样的问题:
为什么 Tailwind 要移除我的
h1元素的默认样式? 我该如何禁用这个? 你是说我会失去所有其他的基础样式?
我们听到了你们的声音,但我们并不认为简单地禁用我们的基础样式就是你们真正想要的。你不会想要在仪表板 UI 中每次使用 p 元素时都得移除烦人的边距。而且我想你也不会真的希望你的博客文章使用浏览器默认样式 — 你希望它们看起来很棒,而不是很糟。
这就是为什么今天我们很高兴发布 @tailwindcss/typography — 一个能给你真正想要的东西的插件,而且不会有像禁用基础样式这样愚蠢的做法带来的任何负面影响。
它添加了一组新的 prose 类,你可以将它们应用到任何原生 HTML 内容块上,将其转换成一个排版精美、格式规范的文档:
<article class="prose lg:prose-xl"> <h1>大蒜面包配奶酪:科学告诉我们什么</h1> <p> 多年来,父母们一直向孩子们宣扬吃奶酪大蒜面包的健康益处,这种食物在我们的文化中获得了如此标志性的地位,以至于孩子们经常在万圣节装扮成温暖的、带奶酪的面包。 </p> <p> 但最近的一项研究表明,这种备受欢迎的开胃菜可能与全国各地出现的一系列狂犬病病例有关。 </p> <!-- ... --></article>那么它实际上看起来怎么样呢? 其实你现在正在看着它 — 我们用它来为这个博客上的内容设置样式!
查看文档了解更多信息并立即尝试。
想讨论这篇文章吗?在 GitHub 上讨论 →