另一个新的 Tailwind 版本来了！这次增加了对渐变、background-clip 的支持，实验性支持在变体工具中使用 @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)
渐变(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)
我们还添加了一个新的 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:
| 类 | CSS |
|---|---|
bg-clip-border | background-clip: border-box |
bg-clip-padding | background-clip: padding-box |
bg-clip-content | background-clip: content-box |
bg-clip-text | background-clip: text |
结合新的渐变功能，你可以使用它来制作很酷的渐变文本，例如：
🌐 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)
出于某种愚蠢的原因，我把 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 间距的推出，它们比原本的 CSS 名称更容易理解，因为 Flexbox 根本不存在“列”这种概念。
🌐 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.
我们建议现在迁移到新名称，并使用此功能标志禁用旧名称：
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)
我们为最近的 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)
现在，你可以在 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 工具添加了设置边框样式的实用功能：
🌐 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)
传递给插件 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)
现在，你可以将颜色定义为回调函数，回调函数会接收一组参数，你可以使用这些参数生成颜色值。
🌐 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)
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 中以 future 属性的形式出现在你的 tailwind.config.js 文件中。
🌐 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 更加困难。
已弃用的间隙工具(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)
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.
需要注意的是，实验性功能可能会引入破坏性更改，不遵循语义化版本，并且可能随时发生变化。
🌐 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)
这是一个重大更新——你现在终于可以在响应式变体、伪类变体以及其他复杂类中使用 @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)
我们添加了新 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)
我们增加了一个更大的间距规模，其中包括新的微型值，如 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)
我们已为每种内置字体大小添加了推荐的默认行高，可以使用 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)
我们新增了三种字体大小（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, },};想讨论这篇文章吗？ 在 GitHub 上讨论 →