Tailwind CSS v2.2

虽然我不敢说我​​们真的计划好了，但在过去的几周里，我们非常享受为 Tailwind 注入全新和激动人心的功能，现在感觉是时候发布新版本了，所以 Tailwind CSS v2.2 来了！

🌐 Well I can't say we were really planning on it but over the last few weeks we've been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2!

这一定是 Tailwind 有史以来功能最丰富的版本之一。在 v2.1 中引入 即时模式 为我们打开了许多原本难以轻松添加的酷炫功能的大门，而这个版本就充满了这些功能的精彩示例。

以下是亮点：

🌐 Here are the highlights:

• 全新高性能 Tailwind CLI
• 前后变体
• 首字母/行变体
• 已选择的文本变体
• 列表标记变体
• 兄弟选择器变体
• 详尽的伪类支持
• 简写颜色不透明度语法
• 扩展任意值支持
• 改进的嵌套支持
• 光标颜色工具
• 背景来源工具
• 简化的转换和过滤组合
• 单侧边框颜色工具
• 内置安全列表、转换和提取支持

有关完整详情，请 查看 GitHub 上的发行说明。

需要注意的是，尽管这是一个次要版本，并且经典引擎没有重大变更， 即时模式（Just-in-Time）仍处于预览阶段，v2.2 引入了一些可能影响你的小改动，因此在升级时，请务必阅读发行说明中的 变更和弃用内容。

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

🌐 When you're ready to upgrade, just install the latest version from npm and you're off to the races:

npm install -D tailwindcss@latest

全新高性能 Tailwind CLI(All-new high-performance Tailwind CLI)

我们以性能至上的理念彻底重写了 Tailwind CLI 工具，同时还添加了对一系列新功能的支持。

🌐 We've rewritten the Tailwind CLI tool from the ground-up with a performance-first mindset, while also adding support for a bunch of new features.

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

以下是一些亮点：

🌐 Here are some of the highlights:

• 无需安装或配置 — 只需 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，而无需对脚本进行任何更改。

🌐 It's fully backwards-compatible with the previous CLI, so if you've got any scripts set up already you should be able to upgrade to v2.2 without making any changes to your scripts.

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

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

🌐 Note that if you were using the tailwindcss-cli wrapper package, you can safely switch to tailwindcss as we've managed to resolve the peer-dependency issues that forced us to create the wrapper package in the first place.

伪元素变体前后对比(Before and after pseudo-element variants)

此功能仅在 即时模式下可用。

多年来人们一直在期待这个功能，现在它终于来了！我们已经增加了对伪元素如 before 和 after 的官方样式支持：

🌐 People have been asking for this for years and it's finally here! We've added first-party support for styling pseudo-elements like before and after:

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

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

🌐 We set content: "" automatically any time you use a before or after variant to make sure the elements are rendered, but you can override it using the new content utilities which have full arbitrary value support:

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

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

🌐 You can even grab the content from an attribute using the CSS attr() function:

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

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

🌐 This can be super helpful when your content has spaces in it, since spaces can't be used in CSS class names.

首字母/行变体(First-letter/line variants)

此功能仅在 即时模式下可用。

我们已经为 first-letter 和 first-line 伪元素添加了变体，因此你可以做像首字下沉这样的效果：

🌐 We've added variants for the first-letter and first-line pseudo-elements, so you can do stuff like drop caps:

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

选定文本变体(Selected text variants)

此功能仅在 即时模式下可用。

我们添加了一个新的 selection 变体，使高亮样式能够轻松匹配你的设计：

🌐 We've added a new selection variant that makes it super easy to style highlighted to match your design:

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

我们甚至将此功能构建为可应用于父元素并向下级联，因此你可以通过在正文中应用工具来为整个网站设置高亮颜色：

🌐 We've even built this feature in such a way that it can be applied to a parent element and cascade down, so you can set a highlight color for your whole site by applying a utility to the 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>

列出标记变体(List marker variants)

此功能仅在 即时模式下可用。

你可以使用新的 marker 变体来为列表开头的项目符号或数字设置样式：

🌐 You can use the new marker variant to style the bullets or numbers at the beginning of a list:

<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 变体一样，我们已经以从父元素继承的方式实现了这一点，所以你不必为每个列表项重复设置。

🌐 Like the selection variant, we've implemented this in a way that it cascades from the parent, so you don't have to repeat it for each list item.

兄弟选择器变体(Sibling selector variants)

此功能仅在 即时模式下可用。

Tailwind CSS v2.2 添加了新的 peer-* 变体，这些变体的行为类似于 group-* 变体，但用于针对兄弟元素而不是父元素。

🌐 Tailwind CSS v2.2 adds new peer-* variants that behave much like the group-* variants, but for targeting sibling elements instead of parent elements.

这对于在选中前一个复选框时设置元素样式、执行浮动标签等操作等都很有用：

🌐 This is useful for things like styling an element when a preceding checkbox is checked, doing things like floating labels, and lots more:

<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 这样的变体，还有更多随手可得。

🌐 Just like group can be combined with any other variant, peer can as well, so you have variants like peer-hover, peer-focus, peer-disabled, and loads more at your fingertips.

生成的 CSS 使用了 通用兄弟选择器，看起来像这样：

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

所以就像在普通 CSS 中一样，它只适用于定位之前的兄弟元素，而不能用于 DOM 中之后出现的兄弟元素。

🌐 So just like in vanilla CSS, it will only work for targeting previous siblings, not siblings that appear later in the DOM.

详尽的伪类支持(Exhaustive pseudo-class support)

此功能仅在 即时模式下可用。

我们为该版本中我们能想到的几乎所有缺失的伪类都添加了变体：

🌐 We've added variants for basically every single missing pseudo-class we could think of in this release:

• 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 —— 当它与新的兄弟选择器变体结合使用时，可以实现一些很酷的效果，比如浮动标签：

🌐 Personal favorite in the list is placeholder-shown — when combined with the new sibling selector variants it makes it possible to do cool stuff like floating labels:

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

颜色透明度简写语法(Shorthand color opacity syntax)

此功能仅在 即时模式下可用。

与使用 bg-opacity-50、text-opacity-25 或 placeholder-opacity-40 这样的工具不同，Tailwind CSS v2.2 为你提供了一种新的颜色不透明度简写，你可以在颜色工具中直接调整颜色的 alpha 通道：

🌐 Instead of using utilities like bg-opacity-50, text-opacity-25, or placeholder-opacity-40, Tailwind CSS v2.2 gives you a new color opacity shorthand you can use to tweak the alpha channel of a color directly in the color utility itself:

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

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

🌐 This means you can now change the opacity of colors anywhere in Tailwind, even where we previously didn’t have specific opacity utilities, like in gradients for example:

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

不透明度值取自你的 opacity 量表，但你也可以使用方括号表示法来使用任意不透明度值：

🌐 The opacity values are taken from your opacity scale, but you can also use arbitrary opacity values using square bracket notation:

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

说实话，比起真正使用这个功能，我更兴奋的是再也不用为你们创建像 placeholderOpacity.js 这样的核心插件了。而且我真的对这个功能很兴奋，所以这也说明了一些问题。

🌐 If I'm being honest, I am more excited about never having to create another core plugin like placeholderOpacity.js for you people again than I am about actually using the feature. And I'm really excited about the feature, so that says something.

扩展的任意值支持(Extended arbitrary value support)

此功能仅在 即时模式下可用。

我们仔细检查了 Tailwind 中的每个核心插件，力求尽可能地添加最灵活的任意值支持，目前为止，我认为我们已经涵盖了几乎所有内容。

🌐 We've gone over every core plugin in Tailwind to try and add the most flexible arbitrary value support we possibly could, and I think we've covered pretty much everything at this point.

你应该能够在任何地方使用任意值：

🌐 You should be able to use whatever arbitrary values you want, just about wherever you want:

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

如果你发现我们遗漏的问题，请提交问题，我们会进行解决。

🌐 If you find one we missed, open an issue and we'll sort it out.

除了让任意值支持更全面之外，我们还添加了一种新的类型提示语法来处理模糊的情况。例如，如果你将 CSS 变量用作任意值，生成的 CSS 并不总是很清楚：

🌐 In addition to making arbitrary value support more comprehensive, we've also added a new type-hint syntax to handle ambiguous situations. For example, if you are using a CSS variable as an arbitrary value, it's not always clear what the generated CSS should be:

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

现在你可以通过在任意值前添加类型名称来向引擎提供提示：

🌐 Now you can provide a hint to the engine by prefixing the arbitrary value with the type name:

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

目前支持的类型包括：

🌐 Currently, the supported types are:

• length
• color
• angle
• list

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

🌐 We'll probably flesh this out even more over time as people discover new edge cases but this should get you very far.

改进了嵌套支持(Improved nesting support)

由于 Tailwind 引入了许多非标准的 CSS at-rule，例如 @tailwind 和 @apply，当将其与像 postcss-nested 或 postcss-nesting 这样的 PostCSS 嵌套插件结合使用时，你经常会遇到奇怪的输出。

🌐 Since Tailwind introduces a lot of non-standard CSS at-rules like @tailwind and @apply, you can often run into weird output when combining it with a PostCSS nesting plugin like postcss-nested or postcss-nesting.

为了缓解这里的问题，我们在 tailwindcss 包中加入了一个新的 PostCSS 插件，它作为现有嵌套插件与 Tailwind 本身之间的轻量兼容层。

🌐 To ease the pain here, we've included a new PostCSS plugin in the tailwindcss package that acts as a lightweight compatibility layer between existing nesting plugins and Tailwind itself.

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

🌐 So if you need nesting support in your project, use our plugin, and stick it before Tailwind in your PostCSS plugin list:

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

默认情况下，它在底层使用 postcss-nested (因为这是我们在 Tailwind 插件中支持嵌套所使用的), 但如果你想改为使用 postcss-nesting，只需将我们的插件作为一个函数调用，并传入 postcss-nesting 插件即可:

🌐 By default, it uses postcss-nested under the hood (since that's what we use to support nesting in Tailwind plugins), but if you'd like to use postcss-nesting instead, just call our plugin as a function and pass through the postcss-nesting plugin:

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

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

🌐 Under the hood, this uses a new screen() function we've introduced that you can use to get the expanded media expression from any of your configured breakpoints:

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

你自己可能不需要使用它，但如果你曾经将 Tailwind 与另一个能够理解 @media 但不能正确处理 @screen 的工具集成时，它可能会很有用。

🌐 You probably won't need to use this yourself but it could be helpful if you're ever integrating Tailwind with another tool that understands @media but doesn't handle @screen properly.

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

插入符号颜色工具(Caret color utilities)

此功能仅在 即时模式下可用。

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

🌐 You can now set the color of the cursor in form fields using the new caret-{color} utilities:

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

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

🌐 These are customizable using the caretColor key in the theme section of your tailwind.config.js file.

背景来源工具(Background origin utilities)

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

🌐 We've added new utilities for the background-origin property, which let you control where an element's background is positioned relative to the element's border, padding box, or content:

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

在 背景来源文档中了解更多。

简化的变换和滤镜组合(Simplified transform and filter composition)

此功能仅在 即时模式下可用。

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

🌐 The transform, filter, and backdrop-filter classes are no longer necessary to "enable" their respective set of composable utilities.

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

现在，只要你使用任何相关的子工具，这些功能就会自动启用。

🌐 Now those features are automatically enabled any time you use any of the relevant sub-utilities.

不过，重要的是要理解，由于这些实用程序不再需要，你不能再指望转换和过滤器默认是“休眠”状态。如果你曾依赖通过切换这些类来有条件地“激活”转换或过滤器，你需要确保改为切换子实用程序本身：

🌐 It's important to understand though that because these utilities aren't needed anymore, you can no longer expect transforms and filters to be "dormant" by default. If you were relying on conditionally "activating" transforms or filters by toggling these classes, you will want to make sure you are toggling the sub-utilities themselves instead:

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

我预计这对大多数人来说不会造成什么问题，但从技术上来说，这是一个重大的改变，所以我们只对 JIT 引擎进行了改进。

🌐 I don't expect this will be a real problem for most people, but it's technically a breaking change which is why we've limited this improvement to the JIT engine only.

每边边框颜色工具(Per-side border color utilities)

此功能仅在 即时模式下可用。

过去四年来，我每个月至少收到一次这样的请求，现在我很高兴地告诉大家，我们终于添加了每侧边框颜色支持，从此我们不必再为开发样式表的大小而烦恼了。

🌐 Requested at least once a month for the last four years, I'm excited to share that we've finally added per-side border color support now that we don't have to sweat the development stylesheet size.

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

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

🌐 Go forth and build ugly websites! (Kidding, kidding, I know they are useful settle the hell down.)

内置安全列表、转换和提取支持(Built-in safelist, transform, and extract support)

我们为一系列重要的 PurgeCSS 功能添加了一级支持，并使它们也能在 JIT 引擎中运行，而 JIT 引擎实际上甚至不使用 PurgeCSS。

🌐 We've added first-class support for a bunch of important PurgeCSS features and made them work in the JIT engine as well, which doesn't actually even use PurgeCSS.

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

🌐 First is safelist, which is super useful if you need to protect specific classes from being removed from your production CSS, perhaps because they are used in content that comes from a database or similar:

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

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

接下来是 transform，它可以让你在扫描潜在类名之前，为不同的文件扩展名转换内容：

🌐 Next is transform, which lets you transform content for different file extensions before scanning it for potential class names:

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

如果你的模板是用可编译为 HTML 的语言（例如 Markdown）编写的，此功能将非常有用。

🌐 This is really useful if you have templates that are written in a language that compiles to HTML, like Markdown.

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

🌐 Finally we have extract, which lets you customize the logic that Tailwind uses to detect class names in specific file types:

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

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

🌐 This is an advanced feature and most users won’t need it. The default extraction logic in Tailwind works extremely well for almost all projects.

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

升级(Upgrading)

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

🌐 To upgrade to Tailwind CSS v2.2, install the latest release from npm:

npm install -D tailwindcss@latest

如果你正在使用即时模式预览，你还需要查看发行说明中的 更改和弃用内容。

准备好升级了吗？ 从 npm 获取 →