Tailwind CSS v3.0

Tailwind CSS v3.0 已经来临 — 带来了令人难以置信的性能提升、巨大的工作流程改进，以及大量荒唐的新特性。

想要了解一些最酷的新特性，请查看我们YouTube频道上的 "Tailwind CSS v3.0 新特性" 视频。

Tailwind CSS v3.0 绝对是我们有史以来最令人兴奋的版本，包含了诸如：

时刻即刻 — 闪电般的构建时间、可叠加变体、任意值支持、更好的浏览器性能等等。
开箱即用的每一种颜色 — 包括所有扩展调色板颜色，如青色、玫瑰、洋红色和石灰色，以及五十种灰色。
彩色盒阴影 — 用于有趣的光晕和反射效果，以及在彩色背景上更自然的阴影。
滚动捕捉 API — 一套全面且可组合的工具，用于仅使用 CSS 进行滚动捕捉。
多列布局 — 让你终于可以构建你梦想中的在线报纸。
原生表单控件样式 — 让复选框、单选按钮和文件输入与您的品牌相匹配，而无需重新发明轮子。
打印修饰符 — 在用户打印页面时控制您网站的样子，直接从 HTML 中设置。
现代宽高比 API — 不再需要填充黑客，除非你需要支持 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 的更多详细信息和逐步说明，请查看升级指南。

时刻即刻

在三月，我们推出了全新的即刻引擎，它带来了巨大的性能提升，解锁了令人兴奋的新特性，如任意值，并使复杂的变体配置成为过去。

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

开箱即用的每一种颜色

在新引擎推出之前，我们在开发过程中总是需要小心控制 CSS 文件的大小，而我们必须做出的最大的权衡之一是仔细限制颜色调色板。

在 v3.0 中，扩展色调色板中的每种颜色默认启用，包括石灰色、青色、天空、洋红色、玫瑰和五十种灰色。

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

滚动捕捉 API

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

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

从新的滚动边距工具开始，逐步了解整个 API，获取更多信息。

多列布局

我们添加了对列的支持 — 报纸布局类型。这些实际上非常有用，也非常适合导航栏布局等场景。

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>

在列文档中了解更多信息 — 并查看新的 break-after/inside/before 工具。

原生表单控件样式

我们为新的 accent-color 属性添加了支持，并增加了样式文件输入按钮的修饰符，使您更容易为原生表单控件添加自己的风格：

在 accent color 和文件输入按钮文档中了解更多信息。

打印修饰符

新的 print 修饰符让您可以控制您的网站在用户打印时的外观：

<div>
  <article class="print:hidden">
    <h1>我的秘密披萨食谱</h1>
    <p>这个食谱是秘密，不得与任何人分享</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">你真的想打印这个吗？这是秘密！</div>
</div>

我本来想说 "在打印样式文档中了解更多信息"，但这并不是事实。

现代宽高比 API

我们添加了对新的原生 aspect-ratio 属性的支持，浏览器支持也越来越好：

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

在宽高比文档中了解更多信息。

花哨的下划线样式

现在您可以更改下划线的颜色、厚度等：

我是德里克，一名在塔图因的天文工程师。我喜欢在 My Company, Inc. 在工作之外，我喜欢观看飞船比赛和进行光剑战斗。

<p>
  我是德里克，一名在塔图因的天文工程师。我喜欢在
  <a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc </a>工作。 在工作之外，我喜欢{" "}
  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> 观看飞船比赛 </a> 和进行
  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> 光剑 </a>{" "} 战斗。
</p>

在文本装饰颜色、文本装饰样式、文本装饰厚度和文本下划线偏移文档中了解更多信息。

RTL 和 LTR 修饰符

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

从左到右

汤姆·库克

运营总监

从右到左

تامر كرم

الرئيس التنفيذي

<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>这个体验是为了在横屏中查看。请旋转设备以查看网站。</p>
  </div>
</div>

该功能的文档的内容甚至比这部分内容还少。

任意属性

这可能是非法的，但我们已经可以添加完全任意的 CSS，并可以与 hover、lg 等修饰符结合使用：

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

这是内联样式希望长大后成为的样子。了解更多信息请参见任意属性文档。

Play CDN

没有办法为 Tailwind CSS v3.0 创建一个合理的基于 CSS 的 CDN 构建，因此我们不得不做些不同的事情 — 我们构建了一个 JavaScript 库。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>示例</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

将该脚本标签添加到任何 HTML 文档中，您就可以在浏览器中使用所有 Tailwind 特性。这仅用于开发目的，但确实是构建小型演示或探索新创意的有趣方式。

了解更多信息请查看 Play CDN 文档。

所以它来了 — Tailwind CSS v3.0！访问新的文档网站，今天就开始使用它。

要查看每一个变化的完整列表，请查看变更日志在 GitHub 上。

Tailwind CSS v3.0

Get all of our updates directly to your inbox.Sign up for our newsletter.

Get all of our updates directly to your inbox.
Sign up for our newsletter.