Custom css gradients no longer work with hover: or dark:

[csarnoult]

What version of Tailwind CSS are you using?

Version 3.0.23

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

postcss-cli 8.4.12, webpack 5.70.0

What version of Node.js are you using?

For example: v17.5.0

What browser are you using?

Chrome, Safari, and FF

What operating system are you using?

macOS 12.3

Reproduction URL

https://play.tailwindcss.com/DxO0hD5enx

Describe your issue

It appears that custom gradients no longer play nice with hover: or dark: This functionality was working up until tailwindcss@3.0.7. As of now, tailwindcss@3.0.6 still has this working.

[tlgreg]

This is unrelated to gradients. Tailwind only generates variants to custom css that is under a @layer. It worked prior to 3.0.7 but that was a bug. (#6589)

Eg. under @layer utilities:
https://play.tailwindcss.com/2UfEFt20hN?file=css

[adamwathan]

Hey! As @tlgreg mentioned, variants only work with classes defined in a @layer, here's the relevant documentation:

https://tailwindcss.com/docs/hover-focus-and-other-states#using-with-your-own-classes

There was a bug as mentioned in earlier versions that caused them to work even when a class wasn't defined in a layer which was fixed, and is understandably a bit annoying if you were relying on the behavior caused by the bug — sorry about that.

[mitch1009]

I encounter this problem when I use external CSS - and use @apply, hover and dark classes breaks the app. I have tried this in Vuejs and Angular.
Ref:

by the way, this is using "@nuxtjs/tailwindcss": "^4.2.1",