CODEWITHSUNDEEP
csstailwind-css
rakitin
rakitin

Reputation: 2175

How to use tailwind gradient utilities with multiple gradients?

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?

Upvotes: 10

Views: 20801

Answers (5)

exmaxx
exmaxx

Reputation: 3639

Use Arbitrary Properties

Since Tailwind v3, you can use arbitrary properties. It seems you posted your question just before its release.

In HTML:

<div
  class="[background-image:linear-gradient(to_bottom,#dbeafe_0%,#dbeafe_100%),linear-gradient(to_bottom,#a7f3d0_0%,#a7f3d0_100%)]"
/>

In CSS with @apply directive:

.container {
  @apply [background-image:linear-gradient(to_bottom,#dbeafe_0%,#dbeafe_100%),linear-gradient(to_bottom,#a7f3d0_0%,#a7f3d0_100%)];
}

How to convert CSS to Tailwind

Just take the CSS property and its value and:

  • wrap it with brackets [, ]
  • replace spaces with underscore _
  • or removes space that are not necessary

E.g. (for a single gradient):

/* from */
background-image:linear-gradient(to bottom, #d44 0%, #fff 100%)

/* to */
[background-image:linear-gradient(to_bottom,#d44_0%,#fff_100%)]

Example

<script src="https://cdn.tailwindcss.com/3.4.15"></script>

<div class="[background-image:linear-gradient(to_bottom,_#dddddd00_0%,_#000000_90%),_linear-gradient(to_right,_#a703d0_0%,_#07f3f0_100%)] h-32 text-white">
  Example of two gradients (left to right and top to bottom, with transparency)
</div>

Upvotes: 1

Brownrice
Brownrice

Reputation: 553

Using CSS's Double-position colour stops and TailwindCSS's resolving ambiguities

via-[percentage:20%_70%]

3 colour example:

<div class="bg-gradient-to-r from-red-300 from-5% via-green-300 via-[percentage:20%_70%] to-blue-300 to-100%"></div>

Source:

GitHub TailwindCSS [Feature Request] Gradient percentage stops

TailwindCSS Resolving Ambiguities

Upvotes: 6

Charles Ouverleaux
Charles Ouverleaux

Reputation: 520

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>

Upvotes: 7

Dudeonyx
Dudeonyx

Reputation: 1099

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>

Upvotes: 1

J.D. Sandifer
J.D. Sandifer

Reputation: 906

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

Upvotes: 3

Related Questions