Tailwind CSS 排版隆重推出

Adam Wathan

到目前为止,尝试使用 Tailwind 为文章、文档或博客文章设置样式一直是一项繁琐的任务,需要敏锐的排版眼光和大量复杂的自定义 CSS。

¥Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

默认情况下,Tailwind 会移除段落、标题、列表等元素的所有默认浏览器样式。这对于构建应用 UI 非常有用,因为你不用花太多时间撤消用户代理样式,但当你真的只是试图为来自 CMS 或 Markdown 文件中的富文本编辑器的内容设置样式时,这可能会令人感到意外且不直观。

¥By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

实际上,我们收到了很多关于这个项目的投诉,人们经常问我们这样的问题:

¥We get lots of complaints about it actually, with people regularly asking us things like:

为什么 Tailwind 要删除我的 h1 元素上的默认样式?如何禁用此功能?什么意思?其他所有基本样式也都丢失了?

¥Why is Tailwind removing the default styles on my h1 elements? How do I disable this? What do you mean I lose all the other base styles too?

我们了解你的需求,但我们并不确信简单地禁用我们的基本样式就是你真正想要的。你肯定不想每次在仪表盘 UI 中使用 p 元素时都必须移除烦人的边距。我怀疑你真的希望你的博客文章使用用户代理样式 - 你希望它们看起来很棒,而不是很糟糕。

¥We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a p element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look awesome, not awful.

正因如此,我们今天兴奋地发布了 @tailwindcss/typography 插件 - 它能满足你的实际需求,避免了禁用基础样式等愚蠢操作带来的负面影响。

¥That's why today we're excited to release @tailwindcss/typography — a plugin that gives you what you actually want, without any of the downside of doing something stupid like disabling our base styles.

它添加了一组新的 prose 类,你可以将它们添加到任何原生 HTML 内容块上,并将其转换为美观且格式良好的文档:

¥It adds a new set of prose classes that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:

<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>

它实际上看起来怎么样?你现在看到的就是它 - 我们用它来设计本博客的内容样式!

¥So how does it actually look? Well you're looking at it right now — we use it to style the content on this very blog!

访问 查看文档 了解更多信息并立即试用。

¥Check out the documentation to learn more and try it out today.

想要讨论这篇文章吗?Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →

TailwindCSS v4.1 中文网 - 粤ICP备13048890号