文档博客案例展示Plus

Tailwind CSS v1.7.0

Adam Wathan

又一个全新的 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 核心插件。

这些插件的默认配置如下所示

tailwind.config.js
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"],
  },
};

了解更多信息，请查看原始 pull request。

新的 background-clip 实用程序

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

它包括 4 个新的实用程序

类名CSS
bg-clip-borderbackground-clip: border-box
bg-clip-paddingbackground-clip: padding-box
bg-clip-contentbackground-clip: content-box
bg-clip-textbackground-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">
    Greetings from Tailwind v1.7.
  </span>
</h1>

默认情况下，backgroundClip 插件仅启用响应式变体。

tailwind.config.js
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} 实用程序，它们的功能完全相同，但名称更合理。现在 flexbox 的 gap 功能也开始推广了，它们比实际的 CSS 名称更有意义，因为 flexbox 没有“列”。

这些实用程序将在 v2.0 中取代旧的实用程序，但目前它们将同时存在。

我们建议现在迁移到新名称，并使用此功能标志禁用旧名称

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

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

新的 contents display 实用程序

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

<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 的这篇精彩文章中了解更多信息。

每个字号的默认 letter-spacing

您现在可以在 tailwind.config.js 主题中为每个字号配置默认的 letter-spacing 值，使用元组语法

tailwind.config.js
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}] 语法外，还支持这种新语法。

Divide border styles

我们为 divide 实用程序添加了用于设置边框样式的实用程序

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

这些实用程序默认包含 responsive 变体

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

从插件访问整个 config 对象

传递给插件 API 的 config 函数现在在不带参数调用时返回整个 config 对象

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

将颜色定义为闭包

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

当尝试使您的自定义颜色与 backgroundOpacity、textOpacity 等实用程序一起使用时，这尤其有用。

tailwind.config.js
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 - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwind.org.cn/docs/upcoming-changes

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

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

如果您不想选择加入，但希望消除警告，请显式将该标志设置为 false

tailwind.config.js
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 标志

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

实验性功能

Tailwind v1.7.0 引入了一个新的实验性功能系统，允许您选择加入 Tailwind 即将推出的新功能，但这些功能尚未完全稳定。

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

如果您喜欢冒险，可以像这样启用所有实验性功能

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

说完这些，以下是我们正在开发的一些有趣的东西，我们很高兴您终于可以体验它们了...

将 @apply 与变体和其他复杂类一起使用

这是一个巨大的进步 —— 您终于可以将 @apply 与响应式变体、伪类变体和其他复杂类一起使用了！

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

这其中有很多细节需要理解，所以我建议阅读 pull request 以了解其工作原理。

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

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

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

新的调色板

我们添加了新的 Tailwind 2.0 调色板的预览，您可以使用 uniformColorPalette 标志立即开始体验。

tailwind.config.js
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 标志启用扩展的间距比例

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

这非常稳定，如果我们要更改它，我会感到惊讶。

默认情况下，每个字号的默认 line-heights

我们为每个内置字号添加了推荐的默认 line-heights，可以使用 defaultLineHeights 标志启用

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

这是一个重大更改，会影响您的设计，因为以前所有字号的默认 line-height 均为 1.5。

扩展的字号比例

我们添加了三个新的字号（7xl、8xl 和 9xl），以跟上最新的超大号英雄文本趋势。它们也包含默认的 line-heights。

您可以在 extendedFontSizeScale 标志下启用它们

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

想讨论这篇文章吗？在 GitHub 上讨论 →

直接在您的收件箱中获取我们所有的更新。
注册我们的新闻通讯。

版权所有 © 2025 Tailwind Labs Inc.·商标政策