如何使用具有多个渐变的顺风渐变实用程序？答案

【问题标题】：How to use tailwind gradient utilities with multiple gradients?如何使用具有多个渐变的顺风渐变实用程序？
【发布时间】：2021-10-26 01:26:55
【问题描述】：

我有一个名为 show padding 的类，它为内容框和填充框着色不同 - 实际上在这里找到它：https://stackoverflow.com/a/18424078/981556)

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

我们的项目正在使用顺风，我想对那些渐变停止使用@apply 指令。用逗号分隔渐变会引发语法错误：

.show-border {
  @apply bg-gradient-to-b from-green-200, from-blue-200;
  background-clip: content-box, padding-box;
}

没有逗号，蓝色压扁了绿色

.show-border {
  @apply bg-gradient-to-b from-green-200 from-blue-200;
  background-clip: content-box, padding-box;
}

有没有办法使用 tailwind 的实用程序类来做到这一点？

【问题讨论】：

一张你想要完成的图像可能会有所帮助:)。看着它，我认为这在您的约束下是不可能的（一个元素上有 2 个顺风梯度）。 @apply 不能像您尝试的那样与 css 语法结合使用。
使用边框不是您的选择吗？您共享的链接中的 jsfiddle 是边框的用途。
这个小提琴可视化了我需要做的事情：jsfiddle.net/techsin/TyXRY/1@ConnorLow 我想要做的是让 CSS 盒子模型的实际填充可见。

标签： css tailwind-css

【解决方案1】：

仔细查看您的示例后，看起来对代码的以下更改将允许您为元素的内容和填充区域实现所需的不同纯色：

.show-border {
  background-image: linear-gradient(
        theme('colors.green.200'),
        theme('colors.green.200')
    ),
    linear-gradient(theme('colors.blue.200'), theme('colors.blue.200'));
  background-clip: content-box, padding-box;
}

theme() 函数允许您从 Tailwind 的主题定义中提取，并且您可以使用字符串中的点语法来识别您的颜色。我也从渐变中删除了方向，因为它们对于您的用例来说似乎是不必要的（纯色而不是渐变）。

文档：https://tailwindcss.com/docs/functions-and-directives#theme

【讨论】：

【解决方案2】：

在顺风中每个标签只能使用一个线性渐变，最多三种颜色（从、通过和到）。

什么@J.D.发布的 Sandifer 是解决此问题的最佳方法。

虽然您也可以使用多个相互分层的 div，每个 div 都有自己的渐变，但无法想象您为什么会选择这个。

<div className="bg-gradient-to-b from-green-200">
   <div className="bg-gradient-to-b from-blue-200">
      {content}
   </div>
</div>

【讨论】：