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 通道上的 "What's new in Tailwind CSS v3.0" 视频。

¥For a tour of some of the coolest new features, check out the "What's new in Tailwind CSS v3.0" video on our YouTube channel.

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

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

始终即时 — 闪电般的构建速度、可堆叠的变体、任意值支持、更佳的浏览器性能等等。

¥Just-in-Time, all the time — lightning fast build times, stackable variants, arbitrary value support, better browser performance, and more.
所有开箱即用的颜色 — 包含所有扩展调色板颜色，例如青色、玫瑰色、紫红色和黄绿色，以及 ~~grey~~ 的五十度灰。

¥Every color out of the box — including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of ~~grey~~ gray.
彩色框阴影 — 提供有趣的发光和反射效果，以及彩色背景上更自然的阴影。

¥Colored box shadows — for fun glow and reflection effects, and more natural shadows on colored backgrounds.
滚动快照 API — 一套全面且可组合的纯 CSS 滚动捕捉工具。

¥Scroll snap API — a comprehensive and composable set of utilities for CSS-only scroll snapping.
多列布局 — 让你终于可以构建你梦寐以求的在线报纸了。

¥Multi-column layout — so you can finally build that online newspaper you've been dreaming about.
原生表单控件样式 — 使复选框、单选按钮和文件输入框与你的品牌相匹配，而无需重新设计。

¥Native form control styling — make checkboxes, radio buttons, and file inputs match your brand without reinventing the wheel.
打印修饰符 — 直接从 HTML 控制网站打印时的外观。

¥Print modifier — control how your site looks when someone prints it, right from your HTML.
现代宽高比 API — 不再需要 padding hack，除非你需要支持 Safari 14（你可能确实需要，但仍然需要）。

¥Modern aspect ratio API — no more padding hacks, well unless you need to support Safari 14, which you probably do, but still.
精美下划线样式 — 让你的副项目最终起飞的缺失环节。

¥Fancy underline styles — the missing piece to making that side-project of yours finally take off.
RTL 和 LTR 修饰符 — 构建多方向网站时实现完全控制。

¥RTL and LTR modifiers — for complete control when building multi-directional websites.
纵向和横向修改器 — 说实话，只是因为它们真的很容易添加。

¥Portrait and landscape modifiers — honestly just because they were really easy to add.
任意属性 — Tailwind 现在支持我们闻所未闻的 CSS 属性。

¥Arbitrary properties — now Tailwind supports CSS properties we've never even heard of.
播放 CDN — 全新即时引擎，融入 CDN 脚本，可直接在浏览器中运行。

¥Play CDN — the new Just-in-Time engine squeezed into a CDN script that runs right in the browser.
大量其他实用工具 - 包括对 touch-action、will-change、flex-basis、text-indent、scroll-behavior 等的支持。

¥Tons of other utilities — including support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more.

此外，我们还拥有一个精美的全新文档网站，每个页面都包含改进的内容和示例。

¥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 在浏览器中试用最新功能。

¥...or head over to Tailwind Play to try out the latest features right in the browser.

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 的更多详细信息和分步说明，请查看 upgrade guide。

¥For more details and step-by-step instructions on migrating to v3.0, check out the upgrade guide.

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

¥Just-in-Time, all the time

早在三月份，我们推出了全新的 Just-in-Time engine，它带来了巨大的性能提升，解锁了像 arbitrary values 这样的激动人心的新功能，并使复杂的变体配置成为过去。

¥Back in March we introduced the brand new Just-in-Time engine which brought huge performance gains, unlocked exciting new features like arbitrary values, and made complex variant configurations a thing of the past.

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

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

查看 color palette reference 了解更多信息。

¥Check out the color palette reference to learn more.

彩色框阴影(Colored box shadows)

¥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 文档中了解更多信息。

¥Learn more in the Box Shadow Color documentation.

滚动快照 API(Scroll snap 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:

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

从新的 Scroll Margin 实用程序开始，逐步了解整个 API 以了解更多信息。

¥Start with the new Scroll Margin utilities and work your way through the whole API to learn more.

多列布局(Multi-column layout)

¥Multi-column layout

我们添加了对 columns 的支持 - 报纸版式。这些组件实际上非常有用，并且非常适合页脚导航布局等。

¥We've added support for columns — the newspaper layout kind. These are actually super useful, and are great for things like footer navigation layouts too.

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 实用程序。

¥Learn more in the columns documentation — and check out the new break-after/inside/before utilities as well.

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

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

了解更多关于 accent color 和 file input buttons 文档的信息。

¥Learn more in the accent color and file input buttons documentation.

打印修饰符(Print modifier)

¥Print modifier

新的 print 修饰符可让你设置网站在 ~~animals~~ 用户打印时的外观：

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

我想说“在 print styles documentation 中学习更多”，但这并非事实。

¥I'd say "learn more in the print styles documentation" but it wouldn't be true.

现代宽高比 API(Modern aspect ratio 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>

在 aspect ratio 文档中了解更多信息。

¥Learn more in the aspect ratio documentation.

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

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

了解更多关于 text decoration color、text decoration style、text decoration thickness 和 text underline offset 文档的信息。

¥Learn more in the text decoration color, text decoration style, text decoration thickness, and text underline offset documentation.

RTL 和 LTR 修饰符(RTL and LTR modifiers)

¥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 support 文档中了解更多信息。

¥Learn more in the RTL support documentation.

纵向和横向修改器(Portrait and landscape modifiers)

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

documentation for this feature 的内容比本文这部分内容还要少。

¥The documentation for this feature has even less content than this section of this post does.

任意属性(Arbitrary properties)

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

这就是内联样式发展起来后想要成为的样子。在 arbitrary properties 文档中了解更多信息。

¥This is what inline styles want to be when they grow up. Learn more in the arbitrary properties documentation.

播放 CDN(Play 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>

将脚本标签添加到任何 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 文档中了解更多信息。

¥Learn more in the Play CDN documentation.

这就是 Tailwind CSS v3.0！立即前往全新 documentation site 开始使用。

¥So there it is — Tailwind CSS v3.0! Head over to the new documentation site to get started with it today.

如需查看每项更改的完整列表，请查看 GitHub 上的 changelog。

¥For a comprehensive list of every single change, check out the changelog on GitHub.