[JIT] !important modifier not applied to responsive variants

[leevigraham]

What version of Tailwind CSS are you using?

2.2.8

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

webpack 5.42.1

What version of Node.js are you using?

v12.22.4

What browser are you using?

Chrome, Firefox, Safari

What operating system are you using?

macOS

Reproduction repository

Play Repo: https://play.tailwindcss.com/Uk7nku1LuZ?file=css

Describe your issue

Similar to #4823 !important modifiers are not applied to responsive variants

<div class="foo"></div>

  .foo {
    @apply !bg-red-500 md:!block h-4;
  }

output:

  .foo {
    height: 1rem;
    --tw-bg-opacity: 1 !important;
    background-color: rgba(239, 68, 68, var(--tw-bg-opacity)) !important
}
@media (min-width: 768px) {
    .foo {
        display: block
    }
}

[RobinMalfait]

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

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

[leevigraham]

Thanks @RobinMalfait