Tailwind CSS v1.7.0

另一个新的 Tailwind 发布来了！这次增加了对渐变、背景裁剪的支持，实验性支持使用 @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"],
  },
};

了解更多信息请访问原始拉取请求。

新的背景裁剪工具

我们还增加了一个新的 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 插件仅启用响应式变体：

tailwind.config.js

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 中替换旧的工具，但目前它们会共存。

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

tailwind.config.js

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 主题中为每个字体大小配置默认字间距值，使用元组语法：

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>

这些工具默认包括响应式变体：

tailwind.config.js

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

从插件访问整个配置对象

传递给插件 API 的 config 函数现在可以在没有参数的情况下返回整个配置选项：

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {
  // 返回整个配置对象
  config()
})

将颜色定义为闭包

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

这在尝试使您的自定义颜色与 backgroundOpacity、textOpacity 等工具相兼容时特别有用：

tailwind.config.js

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 来选择加入重大更改：

tailwind.config.js

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

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

tailwind.config.js

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 标志：

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;
}

与这个功能有关的细节很多，因此我建议阅读拉取请求以了解它的工作原理。

这引入了之前 @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,
  },
};

这相对稳定，我会感到惊讶如果我们对此进行更改。

默认行高按字体大小

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

tailwind.config.js

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

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

扩展字体大小比例

我们增加了三个新的字体大小（7xl、8xl 和 9xl），以跟上最新的巨大标题文本趋势。它们也包括默认的行高。

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

tailwind.config.js

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

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

Tailwind CSS v1.7.0

Get all of our updates directly to your inbox.Sign up for our newsletter.

Get all of our updates directly to your inbox.
Sign up for our newsletter.