How to use tailwind gradient utilities with multiple gradients?

Question

I have a class called show padding, which colors the content box and the padding box differently - actually found it here: 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;
}

Our project is using tailwind, and I'd like to use the @apply directive for those gradient stops. Separating the gradients with a comma throws a syntax error:

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

Without the comma the blue squashes the green

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

Is there a way to do this with tailwind's utility classes?

An image of what you are trying to accomplish might be helpful :). Looking at it, I don't think this is possible with your constraints (2 tailwind gradients on one element). `@apply` can't be combined with css syntax in line like you're attempting to do. — Connor Low, Aug 25 '21 at 23:22
Using a border isn't an option for you? The jsfiddle in the link you shared is what borders are for. — henry, Aug 26 '21 at 00:29
This fiddle visualizes what I need to do: http://jsfiddle.net/techsin/TyXRY/1/ @ConnorLow What I'm trying to do is make visible the actual padding from the css box model. — rakitin, Aug 26 '21 at 00:53

J.D. Sandifer · Answer 1 · 2021-10-05T22:44:37.230

After looking carefully at your example, it looks like the following changes to the code will allow you to achieve the different, solid colors you want for the content and padding areas of an element:

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

The theme() function allows you to pull from Tailwind's theme definitions and you can use the dot syntax in a string to identify your colors. I've removed the directions from the gradients, too, as they seem to be unnecessary for your use case (a solid color instead of a gradient).

Documentation: https://tailwindcss.com/docs/functions-and-directives#theme

score 2 · Answer 2 · answered Aug 01 '22 at 15:33

Indeed tailwind only allows you up to 3 colors (from, via, to). That being said, you can add multiple div to have as many colors as you need. Here an example with 6 colors, where you then need two div's that take half the space and three colors each.

<div className="w-[288px] h-[423px]">
  <div className="bg-gradient-to-b from-red-400 via-yellow-400 to-green-400 h-1/2"></div>
  <div className="bg-gradient-to-b from-blue-300 via-blue-600 to-purple-600 h-1/2"></div>
</div>

score 1 · Answer 3 · answered Jan 02 '22 at 23:58

You can only use one linear gradient per tag in tailwind, for a max of three colors (from, via & to).

What @J.D. Sandifer posted is the best way to get around this.

Although you can as well use multiple divs layered on each other, each with it's own gradient, can't imagine why you'd choose this though.

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

How to use tailwind gradient utilities with multiple gradients?

3 Answers3