Tailwind CSS v2.2 - Tailwind CSS 中文

好吧，我不能说我们真的计划过，但过去几周我们一直在将新的令人兴奋的功能添加到 Tailwind 中，现在感觉是发布的最佳时机，所以它来了——Tailwind CSS v2.2！

这必须是有史以来功能最丰富的 Tailwind 版本之一。在 v2.1 中引入 Just-in-Time 模式为我们打开了通往许多酷炫功能的大门，这些功能我们以前无法轻松添加，而这个版本充满了这些功能的绝佳示例。

以下是亮点

重要的是要注意，虽然这是一个次要版本，并且经典引擎中没有重大更改，但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 的绝对最快构建工具。
压缩支持 — 现在您可以使用 cssnano 压缩您的 CSS，只需添加 --minify 标志。
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:content-['hello'] before:block ..."></div>

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

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

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

首字母/首行变体

此功能仅在 Just-in-Time 模式中可用.

我们为 `first-letter` 和 `first-line` 伪元素添加了变体，因此您可以做一些事情，比如首字母大写

<p class="first-letter:text-4xl first-letter:font-bold first-letter:float-left">
  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:text-gray-500 marker:font-medium">
  <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">
  <!-- ... -->
</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
目标
默认
不确定
显示占位符
自动填充
必需
有效
无效
在范围内
超出范围

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

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

简写颜色不透明度语法

此功能仅在 Just-in-Time 模式中可用.

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

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

这意味着您现在可以在 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] placeholder-[#aabbcc] object-[50%] ..."></div>

如果您发现我们遗漏了任何值，请创建一个问题，我们会解决它。

除了使任意值支持更加全面之外，我们还添加了一种新的类型提示语法来处理模糊情况。例如，如果您使用 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>

目前，支持的类型有：

长度
颜色
角度
列表

随着人们发现新的边缘情况，我们可能会随着时间的推移进一步完善它，但这应该可以让你走得很远。

改进的嵌套支持

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

为了缓解这个问题，我们在 tailwindcss 包中包含了一个新的 PostCSS 插件，它充当现有嵌套插件和 Tailwind 本身之间的轻量级兼容层。

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

// 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="bg-origin-border p-4 border-4 border-dashed ..."
  style="background-image: url(...)"
>
  Background is rendered under the border
</div>

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

<div
  class="bg-origin-content p-4 border-4 border-dashed ..."
  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 class="scale-105 -translate-y-1 hover:transform">
<div class="hover:scale-105 hover:-translate-y-1">

我不认为这对大多数人来说会是一个真正的问题，但从技术上讲这是一个重大变更，这就是为什么我们将此改进限制在 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>

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

内置安全列表、转换和提取支持

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

第一个是 safelist，如果您需要保护特定类不被从生产 CSS 中删除，这非常有用，也许是因为它们用于来自数据库或类似来源的内容。

tailwind.config.js

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

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

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

tailwind.config.js

let remark = require('remark')

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

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

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

tailwind.config.js

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

如果您使用的是 Just-in-Time 模式预览，您还需要阅读发布说明中的更改和弃用。