Tailwind CSS v3.0 介绍（自译）
Tailwind CSS v3.0 版本来了 —— 带着令人难以置信的性能提升，巨大的工作流程改进，以及大量意想不到的新奇功能来了。 注：斗胆随手一翻，翻得不好还请见谅。
前言
想要浏览最酷的新功能，请查看我们的油管频道中的视频 “What’s new in Tailwind CSS v3.0”。 Tailwind CSS v3.0 是迄今为止最让我们激动的版本，尤其是以下的改进提升：
- JIT 模式，即时又及时 —— 闪电般的构建速度，变体可叠加，样式类支持任意值，以及更好的浏览器表现等等。
- 开箱即用的丰富颜色 —— 包括所有默认扩展的调色盘颜色如
cyan、rose、fuchsia、lime等，以及高达五十度的灰色。 - 支持彩色的盒子阴影 —— 为了实现有趣的光影效果和在五颜六色的背景下更自然合理的阴影效果。
- 滚动捕捉 API —— 一个仅由 CSS 构建的全面且可组合的滚动捕捉功能类。
- 多列布局 —— 你现在终于可以制作梦寐以求的瀑布流了！
- 原生表单控件样式 —— 无需重新造轮子即可使各种单/复选框、文件选择框样式都可以符合你的品牌调性。
- 打印样式控制 —— 当别人打印你的网页时，从 HTML 层面控制你的网站显示你想要的样子。
- 更现代化的宽高比控制 API —— 不再需要通过
padding hacks的骚操作，除非你的老板要你兼容 Safari 14而你又不得不听他话。 - 花里胡哨的下划线风格 —— 让你的小项目直接起飞的那双翅膀。
- RTL 和 LTR 修饰符（左/右向修饰符） —— 让你在构建多向网站中完全控制分清南北、控制左右。
- Portrait 和 landscape 修饰符（横/竖屏修饰符） —— 讲真，只是因为这功能容易实现就顺便加上了。
- 支持任意属性 —— Tailwind 现在支持那些我们闻所未闻的 CSS 属性了。
- 通过 CDN 使用 —— 新的 Just-in-Time 引擎的压缩版本可以通过 CDN 脚本的方式直接在浏览器中运行。
- 多到离谱的其他功能类 —— 包括但不限于
touch-action、will-change、flex-basis、text-indent、scroll-behavior诸如此类的支持。
我们还搞了个焕然一新、美轮美奂的文档，上面每组属性、功能类的页面中都有新版本改进的内容和示例提供。
老规矩，从 npm 中获取 Tailwind CSS v3.0 来开始我们的愉快玩耍：
npm install -D tailwindcss@latest postcss autoprefixer…或者直接前往 Tailwind Play 网站直接在浏览器中尝试最新的功能。
Tailwind CSS v3.0 是一个新的大版本，所以带有一些小的破坏性更改，但是我们已经竭尽所能使从旧版本到该版本的升级尽可能地平顺了，对于大多数的旧项目来说，你可以不做任何改动地直接升级到 v3.0 的版本。
举个栗子：Tailwind UI 可能是目前地球上基于 Tailwind 搭建的最大的项目，但它每个模板都可以不改一行代码而从 v2 升级到 v3。
对于更多迁移到 v3 的细节以及手模手教学，请直接查阅升级指南。
JIT 模式，即时又及时
回想一下今年的三月份，我们给大家引进了可以带来巨大性能提升的 Just-in-Time 引擎，解锁了诸如 任意属性（arbitrary values）的新奇功能，以及使我们可以和复杂的变体配置说拜拜的更新。 在 Tailwind CSS v3.0，这个全新的引擎也变得更加高效，完全可以胜任它的前辈的位置了，所以所有基于 Tailwind 的项目都可以从这些开箱即用的改进从受益。
开箱即用的丰富颜色
在新引擎出现之前，我们在开发中总是担心打包出来的 CSS 文件过大，而其中我们做出最大的让步就是不得不谨慎地限制调色盘的颜色。
而在 v3.0 中，我们默认启用了拓展调色盘中的每一个颜色，譬如 lime、cyan、sky、fuchsia、rose 以及色彩斑斓的灰色。
查看 color palette 指南以了解更多
支持彩色的盒子阴影
大家想要彩色阴影想了好些年了，但是要想通过一种真正有意义的可组合的方式来实现它的话，比我设想中要困难得多。 经过好几次的摸索后，我们终于找到了一个舒服地实现它的方式；所以，Tailwind CSS v3.0 终于支持彩色阴影了：
shadow-cyan-500/50
shadow-blue-500/50
shadow-indigo-500/50
滚动捕捉 API
我们为 Scroll Snap 模块添加了一整套能让你直接在 HTML 中构建丰富多彩的滚动捕捉效果的实用功能类： 请在图片栅格中滚动查看预期行为:
多列布局
我们也增加了对多列显示的支持 —— 像报纸版面布局那样。这样的布局方式真的非常有用，也很利用做类似于页尾导航栏一类的布局。
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.
...
原生表单控件样式
我们增加了对新的强调色属性（accent-color）的支持，以及一个用于样式化文件输入按钮的修饰符，使你可以更轻松地实现原生表单控件对于不同动作的效果变化：
打印样式控制
增加了新的打印修饰符以便你控制页面被偷偷地打印时的样式：
<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 部分，其实我不会。
更现代化的宽高比控制 API
我们添加了对新的原生纵横比（aspect-ratio）属性的支持，因为现代浏览器终于开始比较稳定地支持它了：
花里胡哨的下划线风格
你现在可以随心所欲修改下划线的高矮胖瘦五颜六色，以及更多意想不到的模样：
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.
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.
``` 相关内容通通在这几个链接中： [text decoration color](https://tailwindcss.com/docs/text-decoration-color)、[text decoration style](https://tailwindcss.com/docs/text-decoration-style)、[text decoration thickness](https://tailwindcss.com/docs/text-decoration-thickness) 和 [text underline offset](https://tailwindcss.com/docs/text-underline-offset)。RTL 和 LTR 修饰符（左/右向修饰符）
我们使用新的 rtl 和 ltr 修饰符添加了对多向布局的实验性支持：
Left-to-right
Tom Cook
Director of Operations
Right-to-left
تامر كرم
الرئيس التنفيذي
...
...
portrait 和 landscape 修饰符（横/竖屏修饰符）
当视口处于特定的方向时，通过使用新的 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>这个功能的文档甚至比我在这里写的还要少。
支持任意属性
虽然好像不太应当，但是我们还是让添加任意属性值成为了可能，你可以通过这种方式将 hover、lg 等属性类结合使用：
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
<!-- ... -->
</div>这就是那些内联样式梦寐以求的模样，看看它们的文档。
通过 CDN 使用
由于我们实在无法为 Tailwind CSS v3.0 构建一个基于 CSS 的 CDN 链接，所以我们另辟蹊径 —— 构建了一个 Tailwind CSS v3.0 的 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 功能。当然它最好仅用于开发环境中，不过这的确是一种构建小 Demo 或耍聪明搞搞新意思的有趣方式。 在文档中了解更多信息。
这就是 —— Tailwind CSS v3.0！立刻开冲它的文档的船新版本！今天就用它码起来！ 所有更新项的完整列表请移步 GitHub changelog。