Tailwind CSS v3.0

Tailwind CSS v3.0 现已发布 - 它带来了令人难以置信的性能提升、巨大的工作流程改进以及数量惊人的新功能。

🌐 Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.

想了解一些最酷的新功能，请查看我们 YouTube 通道上的 “Tailwind CSS v3.0 新功能”视频。

Tailwind CSS v3.0 是我们迄今为止最激动人心的版本，其改进包括：

🌐 Tailwind CSS v3.0 has got to be our most exciting release ever, including improvements like:

即时编译，时时可用 — 极速构建时间、可堆叠的变体、任意值支持、更佳的浏览器性能，等等。
【盒子里的每一种颜色】——包括所有扩展调色板的颜色，如青色、玫瑰色、紫红色和青绿色，以及五十种灰色的色调。
彩色盒子阴影 — 用于有趣的发光和反射效果，以及彩色背景上更自然的阴影。
Scroll snap API —— 一套全面且可组合的仅用于 CSS 的滚动捕捉工具集。
多栏布局——这样你就可以最终建立你一直梦想的在线报纸。
原生表单控件样式 — 让复选框、单选按钮和文件输入与你的品牌保持一致，无需重新发明轮子。
打印修改器 — 直接通过你的 HTML 控制网站在打印时的显示效果。
现代宽高比 API — 不再需要填充技巧，除非你需要支持 Safari 14，可能确实需要，但仍然如此。
花哨的下划线样式 — 那个能够让你的小项目真正起飞的缺失环节。
RTL 和 LTR 修饰符 — 在构建多方向网站时实现完全控制。
纵向和横向修饰符 — 老实说，只是因为它们真的很容易添加。
任意属性 — 现在 Tailwind 支持我们以前从未听说过的 CSS 属性。
Play CDN — 新的即时引擎被压缩进一个 CDN 脚本中，可以直接在浏览器中运行。
大量其他实用功能 — 包括对 touch-action、will-change、flex-basis、text-indent、scroll-behavior 等的支持。

还有一个漂亮的、全新的文档网站，每一页都充满了改进的内容和示例。

🌐 Plus a beautiful, brand-spanking new documentation website, loaded with improved content and examples on every page.

要立即开始使用 Tailwind CSS v3.0，请从 npm 获取最新版本：

🌐 To start playing with Tailwind CSS v3.0 today, grab the latest release from npm:

npm install -D tailwindcss@latest postcss autoprefixer

...或者前往 Tailwind Play 在浏览器中直接尝试最新功能。

Tailwind CSS v3.0 是框架的全新主要版本，其中包含一些细微的重大更改，但我们已尽最大努力使升级过程尽可能顺畅，对于大多数项目，你无需进行任何更改即可安装 v3.0。

🌐 Tailwind CSS v3.0 is a new major version of the framework and there are some minor breaking changes, but we've worked really hard to make the upgrade process as smooth as possible, and for most projects you should be able to install v3.0 without making any changes.

例如，Tailwind UI 可能是地球上最大的 Tailwind 项目，每个模板都完全兼容 v2 和 v3，无需任何更改。

🌐 For example, Tailwind UI is probably the biggest Tailwind project on earth and every template is totally compatible with both v2 and v3 with no changes required.

有关迁移到 v3.0 的更多详细信息和逐步说明，请查看升级指南。

始终即时(Just-in-Time, all the time)

三月份，我们推出了全新的即时引擎，它带来了巨大的性能提升，解锁了像任意值这样的令人兴奋的新功能，并让复杂的变体配置成为过去式。

在 Tailwind CSS v3.0 中，新引擎已稳定运行并取代了经典引擎，因此每个 Tailwind 项目都可以立即受益于这些改进。

🌐 In Tailwind CSS v3.0, the new engine has gone stable and replaced the classic engine, so every Tailwind project can benefit from these improvements out of the box.

所有开箱即用的颜色(Every color out of the box)

在新引擎出现之前，我们在开发过程中始终必须小心控制 CSS 文件的大小，而我们必须做出的最大权衡之一就是谨慎地限制调色板。

🌐 Before the new engine, we always had to be careful with CSS file size in development, and one of the biggest trade-offs we had to make was carefully limiting the color palette.

在 v3.0 中，扩展调色板中的每一种颜色都默认启用，包括黄绿色、青色、天蓝色、紫红色、玫瑰色和五十度灰。

🌐 In v3.0, every single color in the extended color palette is enabled by default, including lime, cyan, sky, fuchsia, rose, and fifty shades of gray.

查看色彩调色板参考以了解更多信息。

彩色框阴影(Colored box shadows)

多年来，人们一直要求我们提供彩色阴影，但要以一种可组合且切实可行的方式支持它，比我预想的要难得多。

🌐 People have been asking us for colored shadows for years, but supporting it in a composable way that actually made sense was way harder than I expected it to be.

经过大约五次失败的尝试，我们终于找到了一种我们喜欢的方法，现在 Tailwind CSS v3.0 包含彩色阴影：

🌐 After about five false starts, we finally figured out an approach we liked, and now Tailwind CSS v3.0 includes colored shadows:

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(Scroll snap API)

我们为 CSS 滚动捕捉模块添加了一套全面的工具，让你能够直接在 HTML 中构建非常丰富的滚动捕捉体验：

🌐 We've added a comprehensive set of utilities for the CSS Scroll Snap module, giving you the power to build very rich scroll snapping experiences directly in your HTML:

在图片网格中滚动以查看预期行为

从新的滚动边距工具开始，一步步了解整个API以学习更多内容。

多列布局(Multi-column layout)

我们已经添加了对栏的支持——报纸排版那种。这实际上非常实用，也非常适合用在页脚导航布局等地方。

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 工具。

原生表单控件样式(Native form control styling)

我们添加了对新的 accent-color 属性的支持，以及用于设置文件输入按钮样式的修饰符，让你比以往更轻松地在原生表单控件上添加自己的风格：

🌐 We've added support for the new accent-color property, as well as a modifier for styling file input buttons to make it easier than ever to put your own touch on native form controls:

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

在强调色和文件输入按钮文档中了解更多信息。

打印修饰符(Print modifier)

新的 print 修饰符可以让你自定义网站在 ~~动物~~ 人类打印时的显示样式：

🌐 The new print modifier lets you style how your site should look when ~~animals~~ people print it:

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

我本想说“在打印样式文档中了解更多”，但那不是真的。

现代宽高比 API(Modern aspect ratio API)

我们已经增加了对新的原生 aspect-ratio 属性的支持，该属性已经开始获得浏览器的广泛支持：

🌐 We've added support for the new native aspect-ratio property, which is starting to see solid browser support:

<iframe class="aspect-video w-full ..." src="https://www.youtube.com/..."></iframe>

在纵横比文档中了解更多。

精美下划线样式(Fancy underline styles)

现在你可以更改下划线颜色、粗细等：

🌐 Now you can change underline colors, thickness, and more:

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 and LTR modifiers)

我们已经为多方向布局添加了实验性支持，使用新的 rtl 和 ltr 修饰符：

🌐 We've added experimental support for multi-directional layouts with new rtl and ltr modifiers:

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 and landscape modifiers)

使用新的 portrait 和 landscape 修饰符，在视口处于特定方向时有条件地添加样式：

🌐 Use the new portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation:

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

该功能的文档内容甚至比这篇帖子本节的内容还少。

任意属性(Arbitrary properties)

这可能是非法的，但我们已经实现了可以添加完全任意 CSS 的功能，你可以将其与诸如 hover、lg 等修饰符以及其他任意内容结合使用：

🌐 This might be illegal but we've made it possible to add totally arbitrary CSS that you can combine with modifiers like hover, lg, and whatever else:

<div class="[mask-type:luminance] hover:[mask-type:alpha]">  <!-- ... --></div>

这是行内样式长大后想要成为的样子。想了解更多，请参阅任意属性文档。

体验 CDN(Play CDN)

我们无法为 Tailwind CSS v3.0 构建一个合理的基于 CSS 的 CDN，所以我们不得不另辟蹊径 - 我们构建了一个 JavaScript 库。

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

将该 script 标签添加到任何 HTML 文档中，你就可以在浏览器中使用 Tailwind 的所有功能。它仅用于开发目的，但确实是构建小型演示或尝试新想法的一种有趣方式。

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

在 Play CDN文档中了解更多。

就是这样 — Tailwind CSS v3.0！立即前往新的文档网站开始使用吧。

欲查看所有更改的完整列表，请访问 GitHub 上的更新日志。