Tailwind CSS v2.2

我不能说我们真的计划好了，但在过去的几周里，我们一直在愉快地向 Tailwind 倾注新的和令人兴奋的功能，现在感觉是发布版本的合适时机，所以它来了 —— Tailwind CSS v2.2！

这必须是有史以来功能最丰富的 Tailwind 版本之一。在 v2.1 中引入即时 (Just-in-Time) 模式为许多我们原本无法轻松添加的酷炫功能打开了大门，而这个版本就加载了许多很棒的例子。

以下是亮点

全新的高性能 Tailwind CLI
之前和之后变体
首字母/首行变体
选中文本变体
列表标记变体
兄弟选择器变体
详尽的伪类支持
简写颜色不透明度语法
扩展的任意值支持
改进的嵌套支持
光标颜色实用工具
背景原点实用工具
简化的转换和滤镜组合
每侧边框颜色实用工具
内置 safelist、transform 和 extract 支持

重要的是要注意，虽然这是一个小版本发布，并且经典引擎中没有破坏性更改，但即时 (Just-in-Time) 模式仍处于预览阶段，并且 v2.2 引入了一些非常小的更改，可能会影响您，因此请务必仔细阅读升级时发行说明中的更改和弃用。

当您准备好升级时，只需从 npm 安装最新版本即可开始使用

npm install -D tailwindcss@latest

全新的高性能 Tailwind CLI

我们从头开始重写了 Tailwind CLI 工具，以性能至上为理念，同时还增加了对许多新功能的支持。

npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"

以下是一些亮点

无需安装或配置 —— 只需 npx tailwindcss -o output.css 即可从任何地方编译 Tailwind。您甚至可以使用 --jit 标志启用 JIT 模式，并使用 --purge 选项传入您的内容文件，所有这些都无需创建配置文件。
监听模式 —— 这样您就可以在进行任何更改时自动重建 CSS。
JIT 性能优化 —— 由于我们的 CLI 是 Tailwind 特有的，因此我们能够进行大量的优化，使其成为 JIT 模式下编译 CSS 的绝对最快构建工具。
压缩支持 —— 现在您只需添加 --minify 标志即可使用 cssnano 压缩您的 CSS。
PostCSS 插件支持 —— 新的 CLI 将读取并遵循您使用 postcss.config.js 文件配置的任何额外插件。

它完全向后兼容之前的 CLI，因此如果您已经设置了任何脚本，您应该能够升级到 v2.2 而无需对脚本进行任何更改。

查看我们更新的 Tailwind CLI 文档以了解更多信息。

请注意，如果您之前使用的是 tailwindcss-cli 包装器包，您可以安全地切换到 tailwindcss，因为我们已经设法解决了迫使我们在最初创建包装器包的对等依赖问题。

之前和之后伪元素变体

此功能仅在即时 (Just-in-Time) 模式下可用.

人们多年来一直要求这个功能，它终于来了！我们添加了对伪元素（如 before 和 after）进行样式设置的一流支持

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>

每当您使用 before 或 after 变体时，我们都会自动设置 content: ""，以确保元素被渲染，但您可以使用新的 content 实用工具覆盖它，这些实用工具具有完整的任意值支持

<div class="before:block before:content-['hello'] ..."></div>

您甚至可以使用 CSS attr() 函数从属性中获取内容

<div before="hello world" class="before:block before:content-[attr(before)] ..."></div>

当您的内容中包含空格时，这会非常有用，因为空格不能在 CSS 类名中使用。

首字母/首行变体

此功能仅在即时 (Just-in-Time) 模式下可用.

我们添加了 first-letter 和 first-line 伪元素的变体，因此您可以执行首字下沉之类的操作

<p class="first-letter:float-left first-letter:text-4xl first-letter:font-bold">
  The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn Michaels in the long
  anticipated Iron Man match — a 60 minute war of endurance where the man who scored the most number of falls would walk
  away as the WWF World Heavyweight Champion.
</p>

选中文本变体

此功能仅在即时 (Just-in-Time) 模式下可用.

我们添加了一个新的 selection 变体，可以非常轻松地设置高亮样式以匹配您的设计

<p class="selection:bg-pink-200">
  After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the Sharpshooter, his
  signature submission hold. As Michaels screamed in pain, the crowd were certain that Hart was about to walk away from
  WrestleMania XII as the still-World Heavyweight Champion.
</p>

我们甚至以这样一种方式构建了这个功能，它可以应用于父元素并向下级联，因此您可以通过将实用工具应用于 body 来为整个站点设置高亮颜色

<body class="selection:bg-pink-200">
  <!-- ... -->
  <p>
    But Michaels didn't give up — he held on until the bell rang and the designated 60 minutes was up. Hart walked away
    content, thinking that without a clear winner, the title was his to hold. He was not prepared for what would happen
    next, when Gorilla Monsoon declared the match would continue under sudden death rules.
  </p>
</body>

列表标记变体

此功能仅在即时 (Just-in-Time) 模式下可用.

您可以使用新的 marker 变体来设置列表开头的项目符号或编号的样式

<h1>WrestleMania XII Results</h1>
<ol class="marker:font-medium marker:text-gray-500">
  <li>The British Bulldog, Owen Hart, and Vader defeated Ahmed Johnson, Jake Roberts, and Yokozuna</li>
  <li>Roddy Piper defeated Goldust</li>
  <li>Stone Cold Steve Austin defeated Savio Vega</li>
  <li>The Ultimate Warrior defeated Hunter Hearst Helmsley</li>
  <li>The Undertaker defeated Diesel</li>
  <li>Shawn Michaels defeated Bret Hart</li>
</ol>

与 selection 变体一样，我们以一种从父元素级联的方式实现了这一点，因此您不必为每个列表项重复它。

兄弟选择器变体

此功能仅在即时 (Just-in-Time) 模式下可用.

Tailwind CSS v2.2 添加了新的 peer-* 变体，其行为很像 group-* 变体，但用于定位兄弟元素而不是父元素。

这对于在前面的复选框被选中时设置元素样式、执行浮动标签等操作非常有用

<label>
  <input type="checkbox" class="peer sr-only" />
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
    <!-- ... -->
  </span>
</label>

就像 group 可以与任何其他变体组合一样，peer 也可以，因此您拥有 peer-hover、peer-focus、peer-disabled 等变体，并且触手可及的变体更多。

生成的 CSS 使用通用兄弟组合器，如下所示

.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: #3b82f6;
}

因此，就像在原生 CSS 中一样，它仅适用于定位之前的兄弟元素，而不适用于 DOM 中稍后出现的兄弟元素。

详尽的伪类支持

此功能仅在即时 (Just-in-Time) 模式下可用.

在此版本中，我们为基本上每个我们能想到的缺失的伪类添加了变体

only (only-child)
first-of-type
last-of-type
only-of-type
target
default
indeterminate
placeholder-shown
autofill
required
valid
invalid
in-range
out-of-range

列表中我个人最喜欢的是 placeholder-shown —— 当与新的兄弟选择器变体结合使用时，它可以实现浮动标签等炫酷效果

<div class="relative">
  <input id="name" class="peer ..." />
  <label for="name" class="peer-placeholder-shown:top-4 peer-focus:top-0 ..."> Name </label>
</div>

简写颜色不透明度语法

此功能仅在即时 (Just-in-Time) 模式下可用.

Tailwind CSS v2.2 没有使用像 bg-opacity-50、text-opacity-25 或 placeholder-opacity-40 这样的实用工具，而是为您提供了一种新的颜色不透明度简写，您可以使用它直接在颜色实用工具本身中调整颜色的 alpha 通道

<div class="bg-red-500 bg-opacity-25">
<div class="bg-red-500/25">
</div>

这意味着您现在可以在 Tailwind 中的任何位置更改颜色的不透明度，即使在我们以前没有特定不透明度实用工具的地方，例如在渐变中

<div class="bg-gradient-to-r from-red-500/50"></div>

不透明度值取自您的 opacity 比例，但您也可以使用方括号表示法使用任意不透明度值

<div class="bg-red-500/[0.31]"></div>

说实话，与实际使用该功能相比，我更高兴的是永远不必再为您这些人创建像 placeholderOpacity.js 这样的核心插件。而且我对这个功能感到非常兴奋，所以这说明了一些问题。

扩展的任意值支持

此功能仅在即时 (Just-in-Time) 模式下可用.

我们已经检查了 Tailwind 中的每个核心插件，以尝试添加我们可能提供的最灵活的任意值支持，我认为我们已经涵盖了几乎所有内容。

您应该能够在您想要的任何地方使用您想要的任何任意值

<div class="col-start-[73] object-[50%] placeholder-[#aabbcc] ..."></div>

如果您发现我们遗漏了任何内容，请打开一个 issue，我们将解决它。

除了使任意值支持更全面之外，我们还添加了一种新的类型提示语法来处理模棱两可的情况。例如，如果您使用 CSS 变量作为任意值，则并不总是清楚生成的 CSS 应该是什么

<!-- Is this a font size utility, or a text color utility? -->
<div class="text-[var(--mystery-var)]"></div>

现在，您可以通过在任意值前加上类型名称来向引擎提供提示

<div class="text-[color:var(--mystery-var)]"></div>

目前，支持的类型有

length
color
angle
list

随着人们发现新的边缘情况，我们可能会随着时间的推移进一步充实这一点，但这应该能让您走得很远。

改进的嵌套支持

由于 Tailwind 引入了许多非标准的 CSS at-rules，例如 @tailwind 和 @apply，因此当将其与 PostCSS 嵌套插件（如 postcss-nested 或 postcss-nesting）结合使用时，您通常会遇到奇怪的输出。

为了减轻这里的痛苦，我们在 tailwindcss 包中包含了一个新的 PostCSS 插件，该插件充当现有嵌套插件和 Tailwind 本身之间的轻量级兼容层。

因此，如果您的项目中需要嵌套支持，请使用我们的插件，并将其放在 PostCSS 插件列表中的 Tailwind 之前

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    // ...
  ],
};

默认情况下，它在底层使用 postcss-nested （因为这就是我们在 Tailwind 插件中支持嵌套的方式），但是如果您想改用 postcss-nesting，只需将我们的插件作为函数调用并传递 postcss-nesting 插件即可

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require("tailwindcss/nesting")(require("postcss-nesting")),
    require("tailwindcss"),
    // ...
  ],
};

在底层，这使用了我们引入的新的 screen() 函数，您可以使用它从任何配置的断点中获取扩展的媒体表达式

/* Input */
@media screen(sm) {
  /* ... */
}
/* Output */
@media (min-width: 640px) {
  /* ... */
}

您可能不需要自己使用它，但如果您正在将 Tailwind 与另一个理解 @media 但不能正确处理 @screen 的工具集成，它可能会有所帮助。

@screen sm {
@media screen(sm) {
  /* ... */
}

光标颜色实用工具

此功能仅在即时 (Just-in-Time) 模式下可用.

您现在可以使用新的 caret-{color} 实用工具设置表单字段中光标的颜色

<input class="caret-red-500" />

这些可以使用 tailwind.config.js 文件的 theme 部分中的 caretColor 键进行自定义。

背景原点实用工具

我们为 background-origin 属性添加了新的实用工具，可让您控制元素的背景相对于元素的边框、内边距框或内容的位置

<div class="border-4 border-dashed bg-origin-border p-4 ..." style="background-image: url(...)">
  Background is rendered under the border
</div>
<div class="border-4 border-dashed bg-origin-padding p-4 ..." style="background-image: url(...)">
  Background is rendered within the border but on top of any padding
</div>
<div class="border-4 border-dashed bg-origin-content p-4 ..." style="background-image: url(...)">
  Background is rendered within any padding and under the content
</div>

在背景原点文档中了解更多信息。

简化的转换和滤镜组合

此功能仅在即时 (Just-in-Time) 模式下可用.

不再需要 transform、filter 和 backdrop-filter 类来“启用”它们各自的可组合实用工具集。

<div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">
<div class="scale-50 grayscale backdrop-blur-sm">
</div>

现在，每当您使用任何相关的子实用工具时，这些功能都会自动启用。

但重要的是要理解，由于不再需要这些实用工具，您不能再期望转换和滤镜默认情况下是“休眠”的。如果您依赖于通过切换这些类来有条件地“激活”转换或滤镜，您将需要确保您正在切换子实用工具本身

<div class="scale-105 -translate-y-1 hover:transform">
<div class="hover:scale-105 hover:-translate-y-1">
</div>

我不认为这对大多数人来说会是一个真正的问题，但这在技术上是一个破坏性更改，这就是为什么我们将此改进限制为仅 JIT 引擎。

每侧边框颜色实用工具

此功能仅在即时 (Just-in-Time) 模式下可用.

在过去四年中，每月至少被请求一次，我很高兴地分享，既然我们不必担心开发样式表的大小，我们终于添加了每侧边框颜色支持。

<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">
  <!-- ... -->
</div>

去构建丑陋的网站吧！（开玩笑，开玩笑，我知道它们很有用，冷静点。）

内置 safelist、transform 和 extract 支持

我们为许多重要的 PurgeCSS 功能添加了一流的支持，并使它们在 JIT 引擎中也能工作，而 JIT 引擎实际上甚至不使用 PurgeCSS。

首先是 safelist，如果您需要保护特定类不被从您的生产 CSS 中删除，这非常有用，可能是因为它们在来自数据库或类似来源的内容中使用

module.exports = {
  purge: {
    content: ["./src/**/*.html"],
    safelist: [
      "bg-blue-500",
      "text-center",
      "hover:opacity-100",
      // ...
      "lg:text-right",
    ],
  },
  // ...
};

请注意，虽然经典引擎会在此处接受正则表达式，但 JIT 引擎不会。这是因为当我们按需生成类时，该类在被使用之前不存在，因此我们没有任何内容可以与表达式匹配。因此，如果您使用即时模式，请确保您提供完整的类名以获得预期的结果。

接下来是 transform，它允许您在扫描潜在类名之前转换不同文件扩展名的内容

let remark = require("remark");
module.exports = {
  purge: {
    content: ["./src/**/*.{html,md}"],
    transform: {
      md: (content) => {
        return remark().process(content);
      },
    },
  },
  // ...
};

如果您有以编译为 HTML 的语言（如 Markdown）编写的模板，这将非常有用。

最后，我们有 extract，它允许您自定义 Tailwind 用于检测特定文件类型中的类名的逻辑

module.exports = {
  purge: {
    content: ["./src/**/*.{html,md}"],
    extract: {
      pug: (content) => {
        return /[^<>"'`\s]*/.match(content);
      },
    },
  },
  // ...
};

这是一项高级功能，大多数用户不需要它。Tailwind 中的默认提取逻辑对于几乎所有项目都非常有效。

有关这些功能的更多信息，请查看我们的优化生产环境文档。

升级

要升级到 Tailwind CSS v2.2，请从 npm 安装最新版本

npm install -D tailwindcss@latest

如果您使用的是即时模式预览版，您还需要阅读发行说明中的更改和弃用。

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

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