到目前为止,尝试使用 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 会移除段落、标题、列表等的所有浏览器默认样式。这对于构建应用界面非常有用,因为你可以减少撤销用户代理样式的时间,但当你真的只是想为 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元素的默认样式?我该如何禁用这个功能?你说的“我还会丢失所有其他基础样式”是什么意思?
我们听到了你的意见,但我们并不认为仅仅禁用我们的基础样式是你真正想要的。你不希望每次在仪表盘 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!
查看文档 了解更多并今天就试用吧。
想讨论这篇文章吗? 在 GitHub 上讨论 →