如何使用Tailwind渐变工具类实现多重背景渐变效果

实现方案 #

Tailwind 原生的 @apply 指令不支持直接通过逗号分隔多组渐变参数实现多重背景，它的设计逻辑是合并完整的工具类样式，而非拼接多值属性的参数，你之前两种写法报错或效果不符合预期的原因也正在此：加逗号会被识别为非法类名，不加逗号两个色值会被判定为同一条渐变的参数，后面的会覆盖前面的。

你可以通过以下两种方式实现需求：

方案一：扩展 Tailwind 配置（推荐，可生成原生工具类）

在 tailwind.config.js 中扩展背景图和背景裁剪的配置项，自定义专属工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'dual-solid-gradient': 'linear-gradient(to bottom, #dbeafe 0%, #dbeafe 100%), linear-gradient(to bottom, #a7f3d0 0%, #a7f3d0 100%)',
      },
      backgroundClip: {
        'content-padding': 'content-box, padding-box',
      }
    },
  }
}

配置完成后，你既可以直接在HTML元素上使用 bg-dual-solid-gradient bg-clip-content-padding 两个原生工具类，也可以在自定义类中通过 @apply 复用：

.show-border {
  @apply bg-dual-solid-gradient bg-clip-content-padding;
}

方案二：直接写原生CSS（无需改配置）

如果不想修改全局配置，直接在自定义样式文件里写完整的背景属性即可，Tailwind 本身支持和普通CSS混用，不需要强制所有样式都用 @apply 实现：

.show-border {
  background-image: linear-gradient(to bottom, #dbeafe 0%, #dbeafe 100%),
    linear-gradient(to bottom, #a7f3d0 0%, #a7f3d0 100%);
  background-clip: content-box, padding-box;
}

内容的提问来源于stack exchange，提问作者rakitin