Tailwind CSS how to apply background opacity to gradient background?

Question

I'm trying to create a background effect that is based on the types of a Pokemon. The way I'm trying to implement this is by creating a linear gradient background and applying opacity to it. I'm using Tailwind CSS but the opacity is not applying. (I believe this is because lin-grad has no opacity property.)

The specific tailwind CSS code snippet I'm using is below, where grass and poison are colors. Is it possible to apply opacity to a linear gradient background?

"bg-gradient-to-r from-grass to-poison bg-opacity-20"

Answer 1

Trying out the latest Tailwind v3.0 features, now you can make a gradient color slightly see-through by adding /20. In your situation, give this a shot:

"bg-gradient-to-r from-grass/20 to-poison/20"