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 核心插件实现的。

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

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 个新的实用程序

结合新的渐变功能，您可以使用它来实现像这样的酷炫的渐变文本效果

<h1 class="text-6xl font-bold">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
    Greetings from Tailwind v1.7.
  </span>
</h1>

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

module.exports = {
  variants: {
    backgroundClip: ['responsive'],
  },
}

​新的间隙实用程序别名

由于某种愚蠢的原因，我将 column-gap 和 row-gap 实用程序分别命名为 col-gap-{n} 和 row-gap-{n}，这并不糟糕，但它与 Tailwind 中其他事物的命名方式不一致。

我发现自己总是把它们搞错——row-gap 是指一行中的间隙，还是行之间的间隙？

Tailwind v1.7 引入了新的 gap-x-{n} 和 gap-y-{n} 实用程序，它们执行完全相同的功能，但名称不会让人感到困惑。现在，由于 flexbox 的间隙也开始推出，它们比实际的 CSS 名称更有意义，因为 flexbox 没有“列”。

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

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

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

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

​新的 contents 显示实用程序

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

​每个字体大小的默认字母间距

现在，您可以使用元组语法在 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 实用程序中设置边框样式的实用程序

<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, /* ... */ })) {
  // Returns entire config object
  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 - 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 来选择加入重大更改。

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 ...">

要立即选择使用新名称，请在您的 `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 上讨论 →