又一个新的 Tailwind 版本来了！这次带来了渐变支持、background-clip、对使用 @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"], },};了解更多 原始拉取请求。
新的 background-clip 工具类
我们还添加了一个新的 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-6xl 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}，这并不是很糟糕，但它与 Tailwind 中其他事物的命名方式不一致。
我发现自己总是弄错它们的名字 — row-gap 是行中的间隙，还是行之间的间隙？
Tailwind v1.7 引入了新的 gap-x-{n} 和 gap-y-{n} 工具类，它们的功能完全相同，但名字不那么糟糕。它们比实际的 CSS 名称更有意义，因为 flexbox 的间隙功能也开始推出了，而 flexbox 没有“列”。
这些工具类将在 v2.0 中取代旧的工具类，但目前它们会同时存在。
我们建议现在迁移到新名称，并使用此功能标志禁用旧名称：
module.exports = { future: { removeDeprecatedGapUtilities: true, }, // ...};Tailwind 会在控制台中发出警告，提醒你在构建中包含了已弃用的类，直到你启用此标志。
新的 contents display 工具类
我们添加了一个新的 contents 类，用于最近的 display: contents CSS 功能。
<div class="flex"> <div><!-- ... --></div> <!-- 这个容器将作为一个虚拟容器，其子元素将被视为父 flex 容器的一部分 --> <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>这些工具类默认包括 responsive 变体：
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(${variable}, 1))`, }, },};目前唯一传递的是一个 opacityVariable 属性，其中包含当前不透明度变量的名称（--background-opacity、--text-opacity 等），具体取决于使用颜色的插件。
弃用
Tailwind v1.7 引入了一个新的功能标志和弃用系统，旨在使升级尽可能无痛。
每当我们弃用功能或引入新的（稳定的）重大更改时，它们将在 Tailwind v1.x 中的 tailwind.config.js 文件中的 future 属性下可用。
每当有弃用或重大更改可用时，Tailwind 会在每次构建时在控制台中警告你，直到你采用新更改并在配置文件中启用标志：
risk - 有即将到来的重大更改：removeDeprecatedGapUtilitiesrisk - 我们强烈建议现在选择这些更改，以简化将来升级 Tailwind。risk - https://tailwindcss.com/docs/upcoming-changes你可以通过在 tailwind.config.js 文件中将该标志设置为 true 来选择重大更改：
module.exports = { future: { removeDeprecatedGapUtilities: true, },};如果你不想选择加入但希望消除警告，请将标志显式设置为 false：
module.exports = { future: { removeDeprecatedGapUtilities: false, },};我们不推荐这样做，因为这会使升级到 Tailwind v2.0 更加困难。
弃用的 gap 工具类
如前所述，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 新功能。
需要注意的是，实验性功能可能会引入重大更改，不遵循 semver，并且随时可能更改。
如果你喜欢冒险，可以像这样启用所有功能：
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 上讨论 →