Only generate variants for non-user layers (#6589)

* only generate variants for non-user layers

If you have the following css:

```css
@tailwind utilities;
.foo {
  color: red;
}
```

And you HTML looks like this:
```html
<div class="hover:foo"></div>
```

Then the output should _not_ generate a `.hover\:foo {}` class.

* ensure that you can apply user csss (without variants)

* update changelog

src/lib/generateRules.js

@@ -112,6 +112,11 @@ function applyVariant(variant, matches, context) {
     let result = []
 
     for (let [meta, rule] of matches) {
+      // Don't generate variants for user css
+      if (meta.layer === 'user') {
+        continue
+      }
+
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction] of variantFunctionTuples) {