Tailwind CSS v3.0 现已发布 — 带来了惊人的性能提升、巨大的工作流改进,以及大量令人兴奋的新功能。
想要了解一些最酷的新功能,请观看我们 YouTube 频道上的 "Tailwind CSS v3.0 新特性介绍"视频。
Tailwind CSS v3.0 是我们有史以来最令人兴奋的发布版本,包含了以下改进:
- 永久的即时编译 (Just-in-Time) — 闪电般的构建速度、可叠加的变体、任意值支持、更好的浏览器性能等等。
- 开箱即用的所有颜色 — 包括所有扩展调色板的颜色,如青色、玫瑰色、紫红色和青柠色,以及五十种灰色。
- 彩色阴影 — 用于有趣的光晕和反射效果,以及在彩色背景上更自然的阴影。
- 滚动捕捉 API — 一套完整且可组合的纯 CSS 滚动捕捉工具集。
- 多列布局 — 让你终于可以构建梦寐以求的在线报纸了。
- 原生表单控件样式 — 让复选框、单选按钮和文件输入框匹配你的品牌风格,而无需重新发明轮子。
- 打印修饰符 — 直接在 HTML 中控制网站打印时的样式。
- 现代长宽比 API — 不再需要内边距 hack 了,除非你需要支持 Safari 14,这可能是必须的,但仍然...
- 精美的下划线样式 — 让你的副项目终于可以启动的缺失部分。
- RTL 和 LTR 修饰符 — 在构建多方向网站时完全可控。
- 纵向和横向修饰符 — 说实话仅仅是因为它们真的很容易添加。
- 任意属性 — 现在 Tailwind 支持我们从未听说过的 CSS 属性。
- Play CDN — 新的即时编译引擎被压缩到可直接在浏览器中运行的 CDN 脚本中。
- 大量其他工具类 — 包括对 touch-action、will-change、flex-basis、text-indent、scroll-behavior 等的支持。
此外,还有一个漂亮全新的文档网站,每个页面都有改进的内容和示例。
要现在就开始使用 Tailwind CSS v3.0,从 npm 获取最新版本:
npm install -D tailwindcss@latest postcss autoprefixer...或者访问 Tailwind Play 在浏览器中直接试用最新功能。
Tailwind CSS v3.0 是框架的一个新的主要版本,虽然有一些小的破坏性更改,但我们已经努力让升级过程尽可能顺畅,对于大多数项目,你应该可以安装 v3.0 而无需做任何更改。
例如,Tailwind UI 可能是地球上最大的 Tailwind 项目,每个模板都完全兼容 v2 和 v3,无需任何更改。
有关迁移到 v3.0 的更多详细信息和分步说明,请查看升级指南。
Just-in-Time, all the time
在三月份,我们推出了全新的即时编译引擎,它带来了巨大的性能提升,解锁了令人兴奋的新功能,如任意值支持,并让复杂的变体配置成为过去。
在 Tailwind CSS v3.0 中,新引擎已经稳定并取代了经典引擎,因此每个 Tailwind 项目都可以开箱即用地获得这些改进。
Every color out of the box
在新引擎之前,我们在开发时总是要小心 CSS 文件的大小,我们不得不做出的最大权衡之一就是仔细限制调色板。
在 v3.0 中,扩展调色板中的每种颜色默认都启用了,包括青柠色、青色、天蓝色、紫红色、玫瑰色和五十种灰色。
查看调色板参考了解更多信息。
Colored box shadows
很多年来人们一直在要求我们提供彩色阴影,但要以一种真正有意义的可组合方式来支持它,比我预期的要难得多。
经过大约五次失败的尝试后,我们终于找到了一个我们喜欢的方法,现在 Tailwind CSS v3.0 包含了彩色阴影:
shadow-cyan-500/50
shadow-blue-500/50
shadow-indigo-500/50
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>在Box Shadow Color文档中了解更多信息。
滚动捕捉 API
我们为 CSS Scroll Snap 模块添加了一套完整的工具类,让你可以直接在 HTML 中构建丰富的滚动捕捉体验:
Scroll in the grid of images to see the expected behavior
<div class="snap-x ..."> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?auto=format&fit=crop&w=320&h=160&q=80" /> </div></div>从新的 滚动边距 工具类开始,然后逐步学习整个 API 了解更多信息。
多列布局
我们添加了对columns的支持 — 报纸样式布局。这些实际上非常有用,对页脚导航布局等也很有帮助。
Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum.
Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda.
Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus.
Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis.
Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur.
Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit.
Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est.
<div class="columns-1 sm:columns-3 ..."> <p>...</p> <!-- ... --></div>在columns文档中了解更多信息 — 同时也可以查看新的break-after/inside/before工具类。
原生表单控件样式
我们添加了对新的 accent-color 属性的支持,以及一个用于样式化文件输入按钮的修饰符,让你比以往更容易为原生表单控件添加自己的风格:
<form> <div class="flex items-center space-x-6"> <div class="shrink-0"> <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" /> </div> <label class="block"> <span class="sr-only">Choose profile photo</span> <input type="file" class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100" /> </label> </div> <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600"> <input type="checkbox" class="accent-violet-500" checked /> <span>Yes, send me all your stupid updates</span> </label></form>在accent color和file input buttons文档中了解更多信息。
打印修饰符
新的 print 修饰符让你可以控制当~~动物~~人们打印你的网站时的样式:
<div> <article class="print:hidden"> <h1>My Secret Pizza Recipe</h1> <p>This recipe is a secret, and must not be shared with anyone</p> <!-- ... --> </article> <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div></div>我想说"在打印样式文档中了解更多信息",但这并不是真的。
Modern aspect ratio API
我们添加了对新的原生 aspect-ratio 属性的支持,它正在获得坚实的浏览器支持:
<iframe class="aspect-video w-full ..." src="https://www.youtube.com/..."></iframe>在长宽比文档中了解更多信息。
Fancy underline styles
现在你可以更改下划线颜色、粗细等:
I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.
<p> I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at <a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc </a>. Outside of work, I like to{" "} <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing </a> and have <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber </a>{" "} fights.</p>在文本装饰颜色、文本装饰样式、文本装饰粗细和文本下划线偏移文档中了解更多信息。
RTL 和 LTR 修饰符
我们添加了对多方向布局的实验性支持,带有新的 rtl 和 ltr 修饰符:
Left-to-right
Tom Cook
Director of Operations
Right-to-left
تامر كرم
الرئيس التنفيذي
<div class="group flex items-center"> <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" /> > <div class="ltr:ml-3 rtl:mr-3"> <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p> <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p> </div></div>在RTL 支持文档中了解更多信息。
纵向和横向修饰符
使用新的 portrait 和 landscape 修饰符可以在视口处于特定方向时有条件地添加样式:
<div> <div class="portrait:hidden"> <!-- ... --> </div> <div class="landscape:hidden"> <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p> </div></div>这个功能的文档的内容甚至比这篇文章的这一部分还要少。
任意属性
这可能是非法的,但我们让它可以添加完全任意的 CSS,并且可以与 hover、lg 等修饰符组合:
<div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>这就是内联样式长大后想要成为的样子。在任意属性文档中了解更多信息。
Play CDN
There's no way to make a sensible CSS-based CDN build for Tailwind CSS v3.0 so we had to do something different — we built a JavaScript library.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Example</title> <script src="https://cdn.tailwindcss.com/"></script> </head> <body> <!-- --> </body></html>Add that script tag to any HTML document and you can use every Tailwind feature, right in the browser. It's meant for development purposes only, but it sure is a fun way to build little demos or hack on a new idea.
Learn more in the Play CDN documentation.
So there it is — Tailwind CSS v3.0! Head over to the new documentation site to get started with it today.
For a comprehensive list of every single change, check out the changelog on GitHub.