Variants are emitted regardless of layer configuration

[ishitatsuyuki]

What version of Tailwind CSS are you using?
v3.0.7

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

What version of Node.js are you using?
v17.3.0

What browser are you using?
N/A

What operating system are you using?
Linux

Reproduction URL
https://play.tailwindcss.com/dIFXv0zZfF

Describe your issue

We are gradually migrating from another CSS reset to Tailwind's reset. To achieve this, we separate the stylesheet into two, so for old pages we can use Tailwind rules with the legacy CSS reset, while for new pages we adopt Tailwind's base/reset:

/* tailwind-base.css */
@tailwind base;

/* tailwind.css */
@tailwind components;
@tailwind utilities;

It works pretty nice, except that utility variants also ends up getting included in tailwind-base.css. This is what the playground link reproduces.

The reason this happens seems to be that all variant declaration seems to get thrown into the a "variant" category, regardless if the layer is actually enabled:

tailwindcss/src/lib/expandTailwindAtRules.js

Line 98 in 27c67fe

if (sort >= context.minimumScreen) {

The fix can be done by putting a check before we insert the rule into the set. And I figured this out just as I complete writing the issue ;)

[RobinMalfait]

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

This is fixed by #7066 and is available in the latest release.