Background gradient and background opacity

[josefernand]

What version of Tailwind CSS are you using?

v2.0.2

What version of Node.js are you using?

v12.18.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/heNq1Ixp8t

It seems background opacity is not being applied when using a background gradient
Here is a link with the issue I'm seeing https://play.tailwindcss.com/heNq1Ixp8t

Edit: example with the expected result with inline style https://play.tailwindcss.com/vMPLwXLk1u

[MichaelBazhanov]

What version of Tailwind CSS are you using?
v2.0.3

What version of Node.js are you using?
v12.16.0

What browser are you using?
Chrome 89.0.4389.90

What operating system are you using?
Windows 8.1

Hello. I am a newbie writing in VueJS and faced the problem that the cascade of css styles in tailwind does not work as I expected. Maybe I'm doing something wrong. Next, I will try to describe in detail the strange things.

I am writing here because the topic is very similar to my opinion.

On the incoming props, I use classes that do not override the existing ones. We are talking about a simple button with a simple input props (boolean) which, according to the idea, should turn off the already set gradient on the button. The same applies to the banal text color (from white to black) and from-transparent to-transparent.

Here is a link to my css cascade problem
https://codesandbox.io/s/notplain-fp5t9

And here is a link for a solution to the problem
https://codesandbox.io/s/plain-7ozpj

Please tell me is it my mistake somewhere or is it still a bug?

[adamwathan]

Hey! This is currently by design — the bg-opacity utilities only work on background color utilities, not on the background image utilities which is how gradients are generated.

Here's a work around you can use in your case, which is to just use opacity-50 instead of bg-opacity-50:

https://play.tailwindcss.com/IatOE3r3Zb

I know that isn't the best fix in all cases (like if you have text in the element), but in those cases you can use a separate element for the background and use absolute positioning so you can still use regular opacity utilities for the background.

This is very possible for me to implement technically, but it's not a straightforward decision because we'd be re-using the bg-opacity utilities for two different purposes which is not currently done anywhere else in Tailwind.

The best solution would be to introduce from-opacity, via-opacity, and to-opacity utilities so you have total control, and I feel like anything less than that is going to eventually feel limited for someone.

This issue has motivated me to work on a more universal solution to this whole color opacity thing though, which is to support arbitrary opacity stuff anywhere colors are used without having to keep implementing the color opacity stuff on a per utility basis. It would only work in the JIT engine, but would look something like this:

<div class="h-full w-full bg-gradient-to-r from-black/50">

Going to hack on it a bit today, fingers crossed I get somewhere interesting with it.

Going to close this since no plans to make bg-opacity work with gradients but still interested in improving the story for this overall problem, watch for a PR hopefully today.

[josefernand]

Thank you the new feature looks great!