关于前端:TailwindCSS-v30-正式发布一大波新特性来袭

31次阅读

共计 7583 个字符，预计需要花费 19 分钟才能阅读完成。

2021 年 12 月 10 日，TailwindCSS 的创始人 Adam Wathan 发表 TailwindCSS v3.0 正式公布，带来了一系列性能上的改良、对开发工作流的改善以及大量的新个性。

那么这颗在 CSS 工程化畛域极为夺目的新星在 v3.0 为咱们带来了那些乏味的新个性呢？咱们接下来就来一一的介绍它们。

随时随地的 Just-in-Time 模式

Tailwind 2.x 外面引入了一种新的模式，Just-in-Time 模式，能够放弃开发和生产构建是统一的，且都是按需构建，相比之前 Tailwind 须要将所有根底的内容进行构建来说大大晋升了性能，针对任何构建工具，如 Webpack 只须要 800ms 就能够构建实现，而在之前，可能须要 30-45s。

而且得益于 JIT 模式，Tailwind 反对了“任意值辅助类”等一系列新的个性。

之前应用 JIT 时，须要在配置文件外面指定模式：

// tailwind.config.js

module.exports = {
 // ...
  mode: 'jit',
  // ...
}

而后你就能够享受到极快的构建速度，而且能够应用任意值的辅助类，如：

<div class="top-[-113px]"></div>

这在之前的 Tailwind 版本中是不容许的，如果须要笼罩这种任意值的状况，你还是得定义一个类名，而后撰写对应的 CSS：

<div class="arbitrary-values"></div>

<style>
.arbitrary-values {top: -113px;}
</style>

这种模式显得 Tailwind 比拟割裂，所以在 JIT 模式下，因为反对按需构建，所以这种任意值的模式也能够应用 Tailwind 对立的语法进行书写。

而在 v3.0 中，Tailwind 内置了 JIT，无需在配置文件外面申明 JIT 模式，默认就是按需构建、可应用任意辅助类、开发和生产构建形式与产物对立，防止了不一致性、还取得了极大的性能优化。

所有的色彩都开箱即用

在 v3.0 之前，为了关注在开发模式下 CSS 体积的大小，Tailwind 必须要小心的限度可用的色彩，然而在 v3.0 之后，咱们能够引入了很多新的调色板色彩，如 cyan（天蓝色）、rose（玫瑰色）、fuchsia（紫红色）、lime（酸橙色）以及 15 中灰色的暗影，而无需放心日益增大的 CSS 文件体积。

反对有色彩的暗影

之前 Tailwind 想要以一种组合式的形式反对带色彩的暗影是很艰难的，尽管长期以来，用户都在述求这一项性能，然而始终也没有实现。通过 5 次失败的尝试，最终在 Tailwind v3.0 中实现了这项性能，当初你能够在 Tailwind 中应用这些有色彩的暗影了：

比方下述代码：

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

能够失去如下的成果：

滚动捕获 API

咱们退出了一个欠缺的用于实现 CSS 滚动捕获模块的辅助类汇合，使得你能够间接在 HTML 外面实现十分丰盛的滚动捕获的成果：

什么是滚动捕获？也就是滑动到下一个 Item 时，能够抉择滑动到此 Item 的某个地位，比方下列的定位在图片两头。

而下面的成果只须要如下的较为简单的 Tailwind 辅助类：

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

在一个 snap 容器里，snap-center、snap-start 等是用于滚动定位的设置项，而 Scroll Margin 则是用于设置绝对于定位的偏移，应用形如 scroll-m{side}-{size} 这样的格局进行设置，如 scroll-ml-6，则是绝对右边再偏移 6 个单位的长度：

<div class="snap-x ...">
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

如上述代码，snap-center 则会在滚动的时候定位在图片的开始地位，而加了 scroll-ml-6 之后，会再绝对右边偏移 6 个单位，变成如下成果：

多列布局

咱们退出了 columns 列布局反对，也被称之为“新闻版式布局”类型，这种布局十分有用，同时利用在底部的导航栏布局设计时也是十分有用的。

如咱们大多数网站底部的多列导航栏设计，以 Tailwind 官网为例：

当你应用对应的辅助类如下时：

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

你能够取得如下的成果：

原生的表单管制款式

咱们退出了对 CSS 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-gray-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-gray-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>

比方上述的代码逻辑为，在打印模式下，第一个 article 块不展现，而 div 块展现。

古代 aspect ratio API

咱们增加了原生的 aspect ratio ** 属性的反对，因为当初浏览器的反对度曾经十分高了，即咱们能够取得比拟完满的横纵比。

比方如下代码，能够设置视频的最佳横纵比：

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

上述代码失去如下后果：

难看的下划线款式

咱们当初也反对批改下划线的色彩、粗细等属性了~

如上面的代码：

<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-gray-700 group-hover:text-gray-900">...</p>
    <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">...</p>
  </div>
</div>

能够取得如下成果：

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>

任意值辅助类反对

尽管看起来不太正当，然而咱们仍然增加了任意 CSS 值的 Tailwind 辅助类，并使得你能够联合 hover、lg 等修饰符应用：

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

或者像 56px 或者 44px 这种任意值，与 lg 修饰符一起应用：

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>

应用 CDN 来应用 Tailwind

目前没有一个很好的基于 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>

这种形式仅限于在开发环境下应用，或者当你想构建一个 demo 或者想要尝试一个乏味的想法时，你能够这样应用。只须要在任何想要应用 Tailwind 个性的 HTML 文档里增加 script 标签来援用 https://cdn.tailwindcss.com/ 即可。

以上就是 TailwindCSS v3.0 更新的全副个性了，看到这里，你感觉 TailwindCSS v3.0 怎么样呢？你做好将其用于生产、或者退出构建你下一个利用时的工具箱的筹备了🐴？

❤️/ 感激反对 /

以上便是本次分享的全部内容，心愿对你有所帮忙 ^_^

喜爱的话别忘了 分享、点赞、珍藏 三连哦~

欢送关注公众号 程序员巴士 ，来自字节、虾皮、招银的三端兄弟，分享编程教训、技术干货与职业规划，助你少走弯路进大厂。

正文完
前端
发表至： 前端
2021-12-20
 0
关于前端:Vue3项目添加-ESLint-和-Prettier
关于前端:零基础教你学前端59CSS伪元素选择器
关于element-ui:elementui-之-NavMenu-的使用
关于前端:直觉命运人生因果寻找自己所爱