另一个新的 Tailwind 发布来了！这次增加了对渐变、背景裁剪的支持，实验性支持使用 @apply 与变体工具，以及更多功能。让我们来深入探讨一下吧！
新特性
渐变
这次发布的重头戏——Tailwind 现在提供对背景渐变的内置支持！
渐变使用高度可组合的 API 设计，允许您默认在 8 个方向中指定最多三个颜色停止：
<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"> <!-- ... --></div>这得益于一个新的 backgroundImage 核心插件（您可以将其用于任何背景图像！）和一个新的 gradientColorStops 核心插件。
这些插件的默认配置看起来如下：
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"], },};了解更多信息请访问 原始拉取请求。
新的背景裁剪工具
我们还增加了一个新的 backgroundClip 核心插件，可以控制元素内背景的渲染方式。
它包括 4 个新工具：
| 类 | 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 |
结合新的渐变功能，您可以这样做一些很酷的渐变文本效果：
<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"> 来自 Tailwind v1.7 的问候。 </span></h1>默认情况下，backgroundClip 插件仅启用响应式变体：
module.exports = { variants: { backgroundClip: ["responsive"], },};新的 gap 工具别名
出于某种愚蠢的原因，我将 column-gap 和 row-gap 工具命名为 col-gap-{n} 和 row-gap-{n}，这虽然不是 terrible，但与 Tailwind 中其他事物的命名不一致。
我总是搞错它们——row-gap 是行中的间隙，还是行之间的间隙？
Tailwind v1.7 引入了新的 gap-x-{n} 和 gap-y-{n} 工具，它们的功能完全相同，但命名方式更合理。随着 flexbox 的推行，gap 对 flexbox 的适用性更好，因为 flexbox 没有“列”。
这些工具将在 v2.0 中替换旧的工具，但目前它们会共存。
我们建议现在迁移到新的命名，并使用此功能标志禁用旧的命名：
module.exports = { future: { removeDeprecatedGapUtilities: true, }, // ...};在您启用此标志之前，Tailwind 将在控制台发出警告，以提醒您在构建中包含了弃用的类。
新的 contents 显示工具
我们为最近的 display: contents CSS 特性添加了新的 contents 类。
<div class="flex"> <div><!-- ... --></div> <!-- 这个容器将作为一个幻影容器，其子项将被视为父弹性容器的一部分 --> <div class="contents"> <div><!-- ... --></div> <div><!-- ... --></div> </div> <div><!-- ... --></div></div>可以在 Rachel Andrew 的这篇精彩文章 中了解更多信息。
每个字体大小的默认字间距
您现在可以在 tailwind.config.js 主题中为每个字体大小配置默认字间距值，使用元组语法：
module.exports = { theme: { fontSize: { 2xl: ['24px', { letterSpacing: '-0.01em', }], // 也可以设置默认行高 3xl: ['32px', { letterSpacing: '-0.02em', lineHeight: '40px', }], } }}这种新语法是对最近引入的更简单 [{fontSize}, {lineHeight}] 语法的支持。
分隔边框样式
我们为在 divide 工具上设置边框样式添加了工具：
<div class="divide-y divide-dashed"> <div><!-- ... --></div> <div><!-- ... --></div> <div><!-- ... --></div> <div><!-- ... --></div></div>这些工具默认包括响应式变体：
module.exports = { variants: { divideStyle: ["responsive"], },};从插件访问整个配置对象
传递给插件 API 的 config 函数现在可以在没有参数的情况下返回整个配置选项：
tailwind.plugin(function ({ config, addUtilities, /* ... */ })) { // 返回整个配置对象 config()})将颜色定义为闭包
您现在可以将颜色定义为回调，这些回调接收一堆参数，您可以用来生成颜色值。
这在尝试使您的自定义颜色与 backgroundOpacity、textOpacity 等工具相兼容时特别有用：
module.exports = { theme: { colors: { primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`, }, },};当前唯一传递的是一个 opacityVariable 属性，它包含当前不透明度变量的名称（--background-opacity、--text-opacity 等），具体取决于使用颜色的插件。
弃用
Tailwind v1.7 引入了一种新的特性标记和弃用系统，旨在使升级尽可能简单。
每当我们弃用功能或引入新（稳定的）重大更改时，它们将在 Tailwind v1.x 中通过 future 属性在您的 tailwind.config.js 文件中提供。
每当有弃用或重大更改可用时，Tailwind 会在每次构建时在控制台中警告您，直到您采用新更改并在配置文件中启用该标志：
警告 - 即将出现的重大更改：removeDeprecatedGapUtilities警告 - 我们强烈建议您现在选择加入这些更改，以简化未来升级 Tailwind 的过程。警告 - https://tailwindcss.zhcndoc.com/docs/upcoming-changes您可以通过在 tailwind.config.js 文件中将该标志设置为 true 来选择加入重大更改：
module.exports = { future: { removeDeprecatedGapUtilities: true, },};如果您不想选择加入，但希望消除警告，请将标志显式设置为 false：
module.exports = { future: { removeDeprecatedGapUtilities: false, },};我们不推荐这样做，因为这将使升级到 Tailwind v2.0 更加困难。
弃用的间隔工具
如前所述，Tailwind v1.7.0 引入了新的 gap-x-{n} 和 gap-y-{n} 工具，以替换当前的 col-gap-{n} 和 row-gap-{n} 工具。
默认情况下，这两个类将共存，但旧的工具将在 Tailwind v2.0 中被移除。
要迁移到新的类名，只需用新的名称替换旧名称的任何现有用法：
<div class="col-gap-4 row-gap-2 ..."><div class="gap-x-4 gap-y-2 ..."></div>要现在选择加入新名称，请在您的 tailwind.config.js 文件中启用 removeDeprecatedGapUtilities 标志：
module.exports = { future: { removeDeprecatedGapUtilities: true, },};实验性功能
Tailwind v1.7.0 引入了一种新的实验性功能系统，允许您选择加入即将添加到 Tailwind 中但尚不稳定的新功能。
需要注意的是 实验性功能可能引入重大更改，不遵循语义版本控制，并且可能随时发生更改。
但如果您喜欢冒险，可以像这样启用所有功能：
module.exports = { experimental: "all",};说完这些，这里是我们正在开发的一些有趣功能，您可以最终体验到...
使用 @apply 结合变体和其他复杂类
这是一个重磅消息——您终于可以将 @apply 与响应式变体、伪类变体和其他复杂类一起使用！
.btn { @apply bg-indigo hover:bg-indigo-700 sm:text-lg;}与这个功能有关的细节很多，因此我建议阅读拉取请求以了解它的工作原理。
这引入了之前 @apply 工作方式的重大变化，所以，请确保在切换之前阅读所有细节。
要启用此功能，请使用 applyComplexClasses 标志：
module.exports = { experimental: { applyComplexClasses: true, },};新的颜色调色板
我们增加了一些 Tailwind 2.0 新颜色调色板的预览，您可以现在通过 uniformColorPalette 标志开始使用：
module.exports = { experimental: { uniformColorPalette: true, },};新调色板的理念是，每种颜色在每个色调上都具有类似的感知亮度。因此，您可以将 indigo-600 与 blue-600 进行交换，并期望获得相同的颜色对比度。
我们预计这些颜色随着迭代将继续变化，因此使用它们需谨慎。
扩展的间距比例
我们增加了一个更大的间距比例，其中包括新的微小值，如 0.5、1.5、2.5 和 3.5，以及新的大值，如 72、80 和 96，并 为整个间距比例增加了基于百分比的分数值（1/2、5/6、7/12 等）。
您可以使用 extendedSpacingScale 标志启用扩展的间距比例：
module.exports = { experimental: { extendedSpacingScale: true, },};这相对稳定，我会感到惊讶如果我们对此进行更改。
默认行高按字体大小
我们为每个内置字体大小增加了推荐的默认行高，可以使用 defaultLineHeights 标志启用：
module.exports = { experimental: { defaultLineHeights: true, },};这是一个重大变更，将影响您的设计，因为之前所有字体大小的默认行高为 1.5。
扩展字体大小比例
我们增加了三个新的字体大小（7xl、8xl 和 9xl），以跟上最新的巨大标题文本趋势。它们也包括默认的行高。
您可以在 extendedFontSizeScale 标志下启用它们：
module.exports = { experimental: { extendedFontSizeScale: true, },};想要讨论这篇文章吗？ 在 GitHub 上讨论 →