bg-gradient auto-transparent calculation doesn't work when parent element uses two colour gradient

[evoactivity]

What version of Tailwind CSS are you using?

v3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

[email protected] [email protected]
Also through cdn package <script src="https://cdn.tailwindcss.com"></script>

What version of Node.js are you using?

v16.15.0

What browser are you using?

Firefox, Chrome, Safari
All latest

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/w4cImWRzrB

Describe your issue

When creating a transparent gradient the guidance is to not include to-transparent to let tailwind calculate the correct transparent to color to avoid a safari bug. If this happens on a child element where the parent element uses a gradient background with two colors defined then the transparent color is set to the parents to color.

[adamwathan]

Good catch! Fixed here: #8489

Will be in v3.1 coming in a couple days, but also available on our insiders channel in a few minutes:

npm install tailwindcss@insiders