Just-In-Time on-demand '!important' modifier does not work with variants

[draganovik]

What version of Tailwind CSS are you using?

v2.2.4

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

"vue": "^3.0.5", "vite": "^2.3.8"

What version of Node.js are you using?

v14.17.0

What browser are you using?

Microsoft Edge 91.0.864.59

What operating system are you using?

macOS 11.4

Reproduction repository

https://github.com/draganovik/tailwindcss-jit-variant-important-error

Describe your issue

I needed to override some plugin's custom inline CSS that gets injected in HTML element on click,
I tried a tailwind command:

h1 { @apply dark:!text-green-500; }

to override style in dark mode but it didn't work.
Then I manually set:

@media (prefers-color-scheme: dark) { h1 { @apply !text-green-500; } }

And it worked fine.
I don't know if [variant]:![tailwind-class] is supported but it feels like it should be.

[adamwathan]

Hey, thanks for the reproduction! I can confirm that @apply !text-green-500 includes the !important in the output but @apply dark:!text-green-500 does not, so this is definitely a bug.

Started a PR with a failing test here:

#4854

Hopefully can look at this in the near future.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This has been fixed and will be available in the next release.