Tailwind CSS v1.7.0

Tailwind 又发布了一个新版本！这次支持渐变、背景剪辑、实验性地支持将 @apply 与变体工具结合使用，等等。开始深入学习吧！

¥Another new Tailwind release is here! This time with support for gradients, background-clip, experimental support for using @apply with variant utilities, and tons more. Let's dig in!

新功能(New features)

¥New features

渐变(Gradients)

¥Gradients

此版本的最大亮点 - Tailwind 现在内置了对背景渐变的支持！

¥The big one for this release — Tailwind now ships with built-in support for background gradients!

渐变采用高度可组合的 API 设计，默认允许你在 8 个方向之一中指定最多三个色标：

¥Gradients are designed with a highly composable API that lets you specify up to three color stops in one of 8 directions by default:

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">  <!-- ... --></div>

这得益于新的 backgroundImage 核心插件（你可以用它来制作任何你喜欢的背景图片！）和新的 gradientColorStops 核心插件。

¥This is made possible by a new backgroundImage core plugin (which you can use for any background images you like!) and a new gradientColorStops core plugin.

这些插件的默认配置如下：

¥The default configuration for these plugins looks like this:

module.exports = {  theme: {    backgroundImage: {      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",    },    gradientColorStops: (theme) => theme("colors"),  },  variants: {    backgroundImage: ["responsive"],    gradientColorStops: ["responsive", "hover", "focus"],  },};

了解更多 原始拉取请求。

¥Learn more the original pull request.

新的背景剪辑工具(New background-clip utilities)

¥New background-clip utilities

我们还添加了一个新的 backgroundClip 核心插件，你可以使用它来控制元素内背景的渲染方式。

¥We've also added a new backgroundClip core plugin that you can use to control how background are rendered within an element.

它包含 4 个新工具：

¥It includes 4 new utilities:

结合新的渐变功能，你可以使用它来制作很酷的渐变文本，例如：

¥Combined with the new gradient features, you can use this to do cool gradient text stuff like this:

<h1 class="text-center text-5xl font-bold">  <span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">    Greetings from Tailwind v1.7.  </span></h1>

backgroundClip 插件默认只启用响应式版本：

¥Only responsive variants are enabled for the backgroundClip plugin by default:

module.exports = {  variants: {    backgroundClip: ["responsive"],  },};

新的间隙工具别名(New gap utility aliases)

¥New gap utility aliases

出于某些愚蠢的原因，我分别将 column-gap 和 row-gap 工具命名为 col-gap-{n} 和 row-gap-{n}，虽然这不算太糟糕，但与 Tailwind 中其他项目的命名方式不一致。

¥For some dumb reason I named the column-gap and row-gap utilities col-gap-{n} and row-gap-{n} respectively, which isn't terrible but it's not consistent with how other things in Tailwind are named.

我发现自己总是搞错 - row-gap 是一行中的空隙，还是行与行之间的空隙？

¥I was finding myself getting them wrong all the time — is row-gap the gaps in a row, or the gap between rows?

Tailwind v1.7 引入了新的 gap-x-{n} 和 gap-y-{n} 工具，它们的作用完全相同，但名称却相当不错。现在 Flexbox 的 gap 也开始推广了，因为 Flexbox 没有 "columns"，所以它们比实际的 CSS 名称更有意义。

¥Tailwind v1.7 introduces new gap-x-{n} and gap-y-{n} utilities that do the exact same thing but have names that don't suck. They make way more sense than the actual CSS names now that gap for flexbox is starting to roll out too, since flexbox has no "columns".

这些工具将在 v2.0 中取代旧工具，但目前它们共存。

¥These utilities will replace the old ones in v2.0, but for now they both exist together.

我们建议立即迁移到新名称，并使用此功能标记禁用旧名称：

¥We recommend migrating to the new names now, and disabling the old names using this feature flag:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },  // ...};

Tailwind 会在控制台中发出警告，提醒你在构建中包含了已弃用的类，直到你启用此标志为止。

¥Tailwind will issue a warning in the console to remind you that you are including deprecated classes in your build until you enable this flag.

新的 contents 显示工具(New contents display utility)

¥New contents display utility

我们为最近的 display: contents CSS 功能添加了一个新的 contents 类。

¥We've added a new contents class for the recent display: contents CSS feature.

<div class="flex">  <div><!-- ... --></div>  <!-- This container will act as a phantom container, and its children will be treated as part of the parent flex container -->  <div class="contents">    <div><!-- ... --></div>    <div><!-- ... --></div>  </div>  <div><!-- ... --></div></div>

了解更多关于 Rachel Andrew 的精彩文章 的信息。

¥Learn more about it in this great article by Rachel Andrew.

每个字体大小的默认字母间距(Default letter-spacing per font-size)

¥Default letter-spacing per font-size

现在，你可以使用元组语法为 tailwind.config.js 主题中的每个字体大小配置默认字母间距值：

¥You can now configure a default letter-spacing value for each font-size in your tailwind.config.js theme, using a tuple syntax:

module.exports = {  theme: {    fontSize: {      2xl: ['24px', {        letterSpacing: '-0.01em',      }],      // Or with a default line-height as well      3xl: ['32px', {        letterSpacing: '-0.02em',        lineHeight: '40px',      }],    }  }}

除了最近推出的更简单的 [{fontSize}, {lineHeight}] 语法之外，我们还支持这种新语法。

¥This new syntax is supported in addition to the simpler [{fontSize}, {lineHeight}] syntax that was recently introduced.

分隔边框样式(Divide border styles)

¥Divide border styles

我们添加了用于在 divide 工具上设置边框样式的工具：

¥We've added utilities for setting the border style on the divide utilities:

<div class="divide-y divide-dashed">  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div></div>

这些工具默认包含 responsive 变体：

¥These utilities include responsive variants by default:

module.exports = {  variants: {    divideStyle: ["responsive"],  },};

通过插件访问整个配置对象(Access entire config object from plugins)

¥Access entire config object from plugins

传递给插件 API 的 config 函数现在在不带参数调用时会返回完整的配置选项：

¥The config function passed to the plugin API now returns the entire config option when invoked with no arguments:

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {  // Returns entire config object  config()})

将颜色定义为闭包(Define colors as closures)

¥Define colors as closures

现在，你可以将颜色定义为回调函数，回调函数会接收一组参数，你可以使用这些参数生成颜色值。

¥You can now define your colors as callbacks, which receive a bag of parameters you can use to generate your color value.

当你尝试让自定义颜色与 backgroundOpacity、textOpacity 等工具兼容时，此功能尤其有用。

¥This is particularly useful when trying to make your custom colors work with the backgroundOpacity, textOpacity, etc. utilities

module.exports = {  theme: {    colors: {      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,    },  },};

目前唯一传递的是 opacityVariable 属性，它包含当前透明度变量的名称（--background-opacity、--text-opacity 等），具体取决于哪个插件正在使用该颜色。

¥Currently the only thing passed through is an opacityVariable property, which contains the name of the current opacity variable (--background-opacity, --text-opacity, etc.) depending on which plugin is using the color.

已弃用(Deprecations)

¥Deprecations

Tailwind v1.7 引入了一个新功能标记和弃用系统，旨在尽可能简化升级过程。

¥Tailwind v1.7 introduces a new feature flagging and deprecation system designed to make upgrades as painless as possible.

每当我们弃用功能或引入新的（稳定的）重大变更时，它们都将在 Tailwind v1.x 中你的 tailwind.config.js 文件中的 future 属性下提供。

¥Any time we deprecate functionality or introduce new (stable) breaking changes, they will be available in Tailwind v1.x under a future property in your tailwind.config.js file.

每当有弃用或重大更改可用时，Tailwind 都会在每次构建时在控制台中发出警告，直到你采用新的更改并在配置文件中启用相应标志：

¥Whenever there are deprecations or breaking changes available, Tailwind will warn you in the console on every build until you adopt the new changes and enable the flag in your config file:

risk - There are upcoming breaking changes: removeDeprecatedGapUtilitiesrisk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.risk - https://tailwind.nodejs.cn/docs/upcoming-changes

你可以通过在 tailwind.config.js 文件中将该标志设置为 true 来选择加入重大更改：

¥You can opt-in to a breaking change by setting that flag to true in your tailwind.config.js file:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

如果你不想选择加入，但希望静音警告，请明确将标志设置为 false：

¥If you'd prefer not to opt-in but would like to silence the warning, explicitly set the flag to false:

module.exports = {  future: {    removeDeprecatedGapUtilities: false,  },};

我们不建议这样做，因为这会使升级到 Tailwind v2.0 更加困难。

¥We do not recommend this, as it will make upgrading to Tailwind v2.0 more difficult.

已弃用的间隙工具(Deprecated gap utilities)

¥Deprecated gap utilities

如前所述，Tailwind v1.7.0 引入了新的 gap-x-{n} 和 gap-y-{n} 工具，以取代当前的 col-gap-{n} 和 row-gap-{n} 工具。

¥As mentioned previously, Tailwind v1.7.0 introduces new gap-x-{n} and gap-y-{n} utilities to replace the current col-gap-{n} and row-gap-{n} utilities.

默认情况下，这两个类都会存在，但旧版工具将在 Tailwind v2.0 中移除。

¥By default both classes will exist, but the old utilities will be removed in Tailwind v2.0.

要迁移到新的类名，只需将旧名称的任何现有用法替换为新名称即可：

¥To migrate to the new class names, simply replace any existing usage of the old names with the new names:

<div class="col-gap-4 row-gap-2 ..."><div class="gap-x-4 gap-y-2 ..."></div>

要立即选择使用新名称，请在你的 tailwind.config.js 文件中启用 removeDeprecatedGapUtilities 标志：

¥To opt-in to the new names now, enable the removeDeprecatedGapUtilities flag in your tailwind.config.js file:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

实验性功能(Experimental features)

¥Experimental features

Tailwind v1.7.0 引入了一个新的实验性功能系统，允许你选择启用即将在 Tailwind 中推出但尚不稳定的新功能。

¥Tailwind v1.7.0 introduces a new experimental feature system that allows you to opt-in to new functionality that is coming to Tailwind soon but isn't quite stable yet.

需要注意的是，实验性功能可能会引入重大更改，不遵循语义版本 (Semver)，并且可能随时更改。

¥It's important to note that experimental features may introduce breaking changes, do not follow semver, and can change at any time.

如果你喜欢尝试各种不同的风格，可以像这样启用所有样式：

¥If you like to live on the wild side though, you can enable all of them like so:

module.exports = {  experimental: "all",};

搞定这些之后，下面是一些我们非常期待的、终于可以体验的有趣内容……

¥With that out of the way, here is some of the fun stuff we're working on that we're pumped you can finally play with...

将 @apply 与变体和其他复杂类一起使用(Use @apply with variants and other complex classes)

¥Use @apply with variants and other complex classes

这是一个重大更新 - 你终于可以将 @apply 与响应式变体、伪类变体和其他复杂类一起使用了！

¥This is a huge one — you can finally use @apply with responsive variants, pseudo-class variants, and other complex classes!

.btn {  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;}

关于这一点，有很多细节需要理解，所以我推荐使用 阅读拉取请求 来了解它的工作原理。

¥There are a lot of details to understand with this one, so I recommend reading the pull request to learn about how it all works.

这对 @apply 以前的工作方式进行了重大更改，因此请务必在切换之前阅读所有详细信息。

¥This introduces breaking changes to how @apply worked before, so be sure to read all of the details before just flipping the switch.

要启用此功能，请使用 applyComplexClasses 标志：

¥To enable this feature, use the applyComplexClasses flag:

module.exports = {  experimental: {    applyComplexClasses: true,  },};

新的调色板(New color palette)

¥New color palette

我们添加了新的 Tailwind 2.0 调色板的预告片，你可以使用 uniformColorPalette 标志立即开始使用：

¥We've added a teaser of the new Tailwind 2.0 color palette that you can start playing with today using the uniformColorPalette flag:

module.exports = {  experimental: {    uniformColorPalette: true,  },};

新调色板背后的理念是，每种色调的每种颜色都有相似的感知亮度。因此，你可以将 indigo-600 替换为 blue-600，并保持相同的颜色对比度。

¥The idea behind the new palette is that every color at every shade has a similar perceived brightness. So you can swap indigo-600 with blue-600 and expect the same color contrast.

我们预计这些颜色会随着迭代而不断变化，因此使用它们需要你自担风险。

¥We do expect these colors to continue to change a lot as we iterate on them, so use these at your own risk.

扩展的间距缩放比例(Extended spacing scale)

¥Extended spacing scale

我们添加了更大的间距比例，包括新的微值（例如 0.5、1.5、2.5 和 3.5）以及新的大值（例如 72、80 和 96），并在整个间距比例中添加了基于百分比的分数值（1/2、5/6、7/12 等）。

¥We've added a much bigger spacing scale that includes new micro values like 0.5, 1.5, 2.5, and 3.5, as well as new large values like 72, 80, and 96, and added percentage-based fractional values to the whole spacing scale (1/2, 5/6, 7/12, etc.)

你可以使用 extendedSpacingScale 标志启用扩展间距缩放：

¥You can enable the extended spacing scale using the extendedSpacingScale flag:

module.exports = {  experimental: {    extendedSpacingScale: true,  },};

此功能非常稳定，如果我们修改它，我会感到惊讶。

¥This is pretty stable, I would be surprised if we change this.

默认每个字体大小的默认行高(Default line-heights per font-size by default)

¥Default line-heights per font-size by default

我们为每个内置字体大小添加了推荐的默认行高，可以使用 defaultLineHeights 标志启用：

¥We've added recommended default line-heights to every built-in font-size, which can be enabled using the defaultLineHeights flag:

module.exports = {  experimental: {    defaultLineHeights: true,  },};

这是一个重大更改，将影响你的设计，因为以前所有字体大小的默认行高都是 1.5。

¥This is a breaking change and will impact your designs, as previously all font sizes had a default line-height of 1.5.

扩展的字体大小缩放比例(Extended font size scale)

¥Extended font size scale

我们添加了三种新的字体大小（7xl、8xl 和 9xl），以跟上最新的超大字体趋势。它们也包含默认行高。

¥We've added three new font sizes (7xl, 8xl, and 9xl) to keep up with the latest huge-as-hell-hero-text trends. They include default line-heights as well.

你可以在 extendedFontSizeScale 标志下启用它们：

¥You can enable them under the extendedFontSizeScale flag:

module.exports = {  experimental: {    extendedFontSizeScale: true,  },};

想要讨论这篇文章吗？Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →