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 中引入 Just-in-Time mode 为我们打开了许多酷炫功能的大门，否则我们无法轻易添加这些功能，而此版本中充满了这些功能的精彩示例。

¥This has to be one of the most feature-rich Tailwind releases of all-time. Introducing Just-in-Time mode back in v2.1 has opened the doors to a lot of cool features we couldn't have easily added otherwise, and this release is loaded with great examples of that.

以下是亮点：

¥Here are the highlights:

全新高性能 Tailwind CLI

¥All-new high-performance Tailwind CLI
变体前后对比

¥Before and after variants
首字母/行变体

¥First-letter/line variants
选定文本变体

¥Selected text variants
列出标记变体

¥List marker variants
兄弟选择器变体

¥Sibling selector variants
详尽的伪类支持

¥Exhaustive pseudo-class support
颜色不透明度简写语法

¥Shorthand color opacity syntax
扩展的任意值支持

¥Extended arbitrary value support
改进了嵌套支持

¥Improved nesting support
插入符号颜色实用程序

¥Caret color utilities
背景来源实用程序

¥Background origin utilities
简化的变换和滤镜组合

¥Simplified transform and filter composition
每边边框颜色工具

¥Per-side border color utilities
内置安全列表、转换和提取支持

¥Built-in safelist, transform, and extract support

完整详情，请访问 GitHub 上的 check out the release notes。

¥For the full details, check out the release notes on GitHub.

需要注意的是，虽然这是一个小版本，并且经典引擎 Just-in-Time mode is still in preview and v2.2 introduces a few very small changes that might impact you 中没有重大更改，但升级时请务必阅读发行说明中的 changes and deprecations。

¥It's important to note that although this is a minor release and there are no breaking changes in the classic engine, Just-in-Time mode is still in preview and v2.2 introduces a few very small changes that might impact you, so make sure you read through the changes and deprecations in the release notes when upgrading.

当你准备升级时，只需从 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)

¥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 选项传入内容文件，所有这些都无需创建配置文件。

¥No installation or configuration necessary — simply npx tailwindcss -o output.css to compile Tailwind from anywhere. You can even enable JIT mode with the --jit flag and pass in your content files using the --purge option, all without creating a config file.
观看模式 - 这样，无论何时进行任何更改，都可以自动重建 CSS。

¥Watch mode — so you can automatically rebuild your CSS whenever you make any changes.
JIT 性能优化 - 由于我们的 CLI 是 Tailwind 专用的，因此我们能够进行大量的优化，使其成为在 JIT 模式下编译 CSS 的绝对最快的构建工具。

¥JIT performance optimizations — since our CLI is Tailwind-specific we've been able to make tons of optimizations that make it the absolute fastest build tool for compiling your CSS in JIT mode.
最小化支持 - 现在只需添加 --minify 标志即可使用 cssnano 压缩 CSS。

¥Minification support — now you can minify your CSS with cssnano just by adding the --minify flag.
PostCSS 插件支持 - 新的 CLI 将读取并遵循你使用 postcss.config.js 文件配置的任何额外插件。

¥PostCSS plugin support — the new CLI will read and respect any extra plugins you configure using a postcss.config.js file.

它完全向后兼容之前的 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.

查看我们的 updated Tailwind CLI documentation 了解更多信息。

¥Check out our updated Tailwind CLI documentation to learn more.

请注意，如果你之前使用的是 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 and after pseudo-element variants

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

多年来，人们一直渴望实现这一点，现在终于实现了！我们添加了对 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/line variants

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

我们为 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)

¥Selected text variants

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

我们添加了一个新的 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)

¥List marker variants

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

你可以使用新的 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)

¥Sibling selector variants

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

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 使用 general sibling combinator 格式，如下所示：

¥The generated CSS uses the general sibling combinator and looks like this:

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

¥Exhaustive pseudo-class support

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

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

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

only(单选)

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

¥Shorthand color opacity syntax

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

Tailwind CSS v2.2 不再需要使用 bg-opacity-50、text-opacity-25 或 placeholder-opacity-40 等实用程序，而是提供了一种新的颜色不透明度简写方法，你可以使用它直接在颜色实用程序中调整颜色的 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)

¥Extended arbitrary value support

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

我们仔细检查了 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)

¥Improved nesting support

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

¥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.js
module.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.js
module.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 utilities

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

现在，你可以使用新的 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 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>

在 background origin documentation 中了解更多信息。

¥Learn more in the background origin documentation.

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

¥Simplified transform and filter composition

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

transform、filter 和 backdrop-filter 类不再是 "enable" 各自可组合实用程序集的必需类。

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

但需要注意的是，由于这些实用程序不再需要，因此你不能再期望转换和过滤器默认为 "dormant"。如果你通过切换这些类来依赖有条件的 "activating" 转换或过滤器，则需要确保切换的是子实用程序本身：

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

¥Per-side border color utilities

此功能仅在 Just-in-Time mode 中可用。

¥This feature is only available in Just-in-Time mode.

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

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

¥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 引擎则不会。这是因为当我们按需生成类时，类在使用之前并不存在，所以我们没有任何东西可以与表达式匹配。如果你使用的是即时模式，请确保提供完整的类名以获得预期结果。

¥Note that while the classic engine will accept regular expressions here, the JIT engine will not. That's because when we're generating classes on demand, the class doesn't exist until it's used so we have nothing to match the expression against. So if you're using just-in-time mode, make sure you're providing complete class names to get the expected result.

接下来是 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.

有关这些功能的更多信息，请查看我们的 optimizing for production documentation。

¥For more information on these features, check out our optimizing for production documentation.

升级(Upgrading)

¥Upgrading

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

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

npm install -D tailwindcss@latest

如果你使用的是即时模式预览版，你还需要阅读发行说明中的 changes and deprecations。

¥If you are using the Just-in-Time mode preview, you'll also want to read through the changes and deprecations in the release notes.

准备好升级了吗？Get it from npm →

¥Ready to upgrade? Get it from npm →