[JIT] class="hidden group-hover:block" isn't hidden in JIT mode

[vdzk]

What version of Tailwind CSS are you using?

@tailwindcss/postcss7-compat@^2.1.0

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

Create React App

What version of Node.js are you using?

v14.16.1

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction repository

https://github.com/tailwindlabs/tailwindcss

Describe your issue

Sorry, no time to make a repo. Feel free to close the issue. Still, I just wanted to let you know.

// tailwind.config.js
variants: {
  extend: {
    display: ['group-hover']
  }
},

// component.jsx
<div className="group">
  <Folder className="h-4 group-hover:hidden"/>
  <FolderOpen className="h-4 hidden group-hover:block"/>
  <div className="px-1">
    {title}
  </div>
</div>

I toggle between two icons on parent hover. Without JIT mode, it works. With JIT, hover-on icon shows alongside the hover-off icon.

[hovatterz]

Same issue here

[kenhyuwa]

same issues .hidden class not generate when using jit mode.

[adamwathan]

Someone please provide a reproduction or can't help unfortunately. Definitely works, we use it on the Tailwind docs all over the place and that's using JIT, so must be some specific case.

[hovatterz]

I believed #4078 fixed the problem for me. If the others would like to confirm just run yarn upgrade tailwindcss@npm:@tailwindcss/postcss7-compat --latest to update

[vdzk]

Сan confirm that upgrading to @tailwindcss/postcss7-compat@^2.1.2 fixed the issue.

Great work!

Thank you.