[v2.1.1] With JIT disabled, precedence of extended variant classes is not properly compiled.

[amithm7]

What version of Tailwind CSS are you using?

v2.1.1

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

postcss-cli 8.3.1

What version of Node.js are you using?

v14.16.1

What browser are you using?

Chrome

What operating system are you using?

debian bullseye

Reproduction repository

https://github.com/amithm7/issue-tailwindcss-2.1-no-jit-build

Describe your issue

With TailwindCSS 2.1.1, when JIT mode is disabled, and using extended variants, precedence of classes are not properly compiled.

For example, here 'dark' variant is extended with 'display'.

And with JIT disabled, compiled in production environment, .hidden { display: none } class has higher precedence than @media (prefers-color-scheme: dark) { .dark\:block { display: block }}.

However with JIT enabled (see ./build-styles-jit.css), this issue doesn't exist. (Extended variants are not needed here anyway)

[adamwathan]

Hey thanks for catching this! Will be fixed in v2.2, can play with it now by pulling in our canary release though:

npm install -D tailwindcss@canary