Tailwind CSS v3.0 - Tailwind CSS 中文

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

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

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

始终如一的 Just-in-Time——闪电般的构建速度、可堆叠变体、任意值支持、更好的浏览器性能等等。
开箱即用的所有颜色——包括所有扩展调色板颜色，如青色、玫瑰色、洋红色和青柠色，以及五十种灰色灰色。
彩色阴影——用于有趣的辉光和反射效果，以及在彩色背景上更自然的阴影。
滚动捕捉 API——一套全面且可组合的实用程序，用于仅 CSS 的滚动捕捉。
多列布局——这样你就可以最终构建你一直梦寐以求的在线报纸了。
原生表单控件样式——使复选框、单选按钮和文件输入与你的品牌相匹配，无需重新发明轮子。
打印修饰符——直接从你的 HTML 中控制你的网站在有人打印时显示的样子。
现代纵横比 API——不再需要填充黑客，除非你需要支持 Safari 14，你可能需要，但仍然如此。
花哨的下划线样式——让你的副项目最终起飞的缺失部分。
RTL 和 LTR 修饰符——在构建多方向网站时实现完全控制。
纵向和横向修饰符——老实说，只是因为它们真的很容易添加。
任意属性——现在 Tailwind 支持我们从未听说过的 CSS 属性。
Play CDN——新的 Just-in-Time 引擎压缩到一个 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 的更多详细信息和分步说明，请查看升级指南。

实时，一直

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

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

开箱即用的所有颜色

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

在 v3.0 中，扩展色板中的所有颜色默认情况下都已启用，包括青柠色、青色、天蓝色、洋红色、玫瑰色和五十种灰色。

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

多列布局

我们添加了对 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 object-cover rounded-full" 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:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 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 和文件输入按钮文档中了解更多信息。

打印修饰符

新的 `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="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

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

花哨的下划线样式

现在您可以更改下划线的颜色、粗细等。

我是德里克，一位居住在塔图因的宇航工程师。我喜欢在我的公司，股份有限公司建造 X 翼战机。在工作之余，我喜欢观看飞车比赛，并进行光剑战斗。

<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` 修饰符的多方向布局的实验性支持。

从左到右

汤姆·库克

运营总监

从右到左

تامر كرم

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

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 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>
<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</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 上的变更日志。