CSS – How to use the tailwind gradient utility with multiple gradient?

I have a class called Show Padding, which gives different colors to the content box and padding box – 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 want to use the apply instruction for these gradient stops. Separating Milan with a comma throws out a grammatical error:

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

Squash blue-green without coma.

.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 Telwind utility classes?

Leave a Reply

Your email address will not be published.