Tailwind CSS v3.0

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

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

Tailwind CSS v3.0 绝对是我们有史以来最激动人心的版本，包括以下改进：

即时编译，始终在线 — 闪电般的构建速度、可堆叠的变体、任意值支持、更佳的浏览器性能等等。
开箱即用的所有颜色 — 包括所有扩展调色板颜色，如青色、玫瑰色、紫红色和酸橙色，以及五十种色调的 ~~灰色~~ 灰色。
彩色阴影 — 用于有趣的光晕和反射效果，以及彩色背景上更自然的阴影。
滚动捕捉 API — 一套全面且可组合的实用工具，用于纯 CSS 滚动捕捉。
多列布局 — 这样你终于可以构建你一直梦想的在线报纸了。
原生表单控件样式 — 使复选框、单选按钮和文件输入框与你的品牌相匹配，而无需重新发明轮子。
打印修饰符 — 直接从你的 HTML 控制你的网站在打印时的外观。
现代纵横比 API — 不再需要 padding 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 的更多详细信息和分步说明，请查看升级指南。

即时编译，始终在线

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

在 Tailwind CSS v3.0 中，新引擎已经变得稳定并取代了经典引擎，因此每个 Tailwind 项目都可以开箱即用地从这些改进中受益。

开箱即用的所有颜色

在新引擎之前，我们始终必须小心开发中的 CSS 文件大小，我们必须做出的最大权衡之一是仔细限制调色板。

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

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

滚动捕捉 API

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

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

从新的滚动边距实用工具开始，并逐步了解整个 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>

在列文档中了解更多信息 — 并查看新的 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>

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

打印修饰符

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

我会说“在打印样式文档中了解更多信息”，但这并非事实。

现代纵横比 API

我们添加了对新的原生 aspect-ratio 属性的支持，该属性正开始获得可靠的浏览器支持

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

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

花式下划线样式

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

我是 Derek，一位位于塔图因的太空工程师。我喜欢在 My Company, Inc. 工作。工作之余，我喜欢观看飞梭赛车并进行光剑格斗。

<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 修饰符

从左到右

Tom Cook

运营总监

从右到左

تامر كرم

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

<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

对于 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>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

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

在 Play CDN 文档中了解更多信息。

这就是 Tailwind CSS v3.0！访问新的文档站点以立即开始使用它。

有关每个更改的完整列表，请查看 GitHub 上的更新日志。

直接在你的收件箱中获取我们所有的更新。注册我们的新闻通讯。

直接在你的收件箱中获取我们所有的更新。
注册我们的新闻通讯。