Repository: tailwindlabs/tailwindcss (ts)

Issue:
v2.2.5 not generating global variables
### What version of Tailwind CSS are you using?

v2.2.5

### What build tool (or framework if it abstracts the build tool) are you using?

nextjs v11

### What version of Node.js are you using?

14

### What browser are you using?

Chrome

### What operating system are you using?

macOS

### Reproduction repository

https://codesandbox.io/s/modest-morning-53dm6?file=/src/styles/index.css

### Describe your issue

After upgrading to the latest patch version, it seems like there is now a bug with the transform property. the CSS being generated:

```css
position: absolute;
top: 0px;
right: 0px;
--tw-translate-x: -0.875rem;
transform: var(--tw-transform);
--tw-translate-y: 0.875rem;
transform: var(--tw-transform);
```
    
as you can see, it generated `--tw-translate-y` and `--tw-translate-x` but tries to use `--tw-transform` which is not available or set anywhere. 
    
This is how it's being generated:

```postcss
.class {
  @apply absolute top-0 right-0 -translate-x-3.5 translate-y-3.5;
}
```

UPDATE:

Sorry, i just downgraded and see that it's actually because it's *not* generating variables for `*, ::after, ::before`

```postcss
  // this is missing in 2.2.5
*, ::before, ::after {
  ...
  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  ...
}
```

Pull request:
Fix issue where base styles not generated for translate transforms in JIT
Resolves #5034.

Patch:
diff --git a/src/plugins/translate.js b/src/plugins/translate.js
index 9d81ac31..d34a6832 100644
--- a/src/plugins/translate.js
+++ b/src/plugins/translate.js
@@ -5,8 +5,14 @@ export default function () {
     if (config('mode') === 'jit') {
       return createUtilityPlugin('translate', [
         [
-          ['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
-          ['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
+          [
+            'translate-x',
+            [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
+          ],
+          [
+            'translate-y',
+            [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+          ],
         ],
       ])({ config, ...rest })
     } else {


Test patch:
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index f6069311..c610a3bc 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -1,3 +1,7 @@
+.translate-x-5,
+.-translate-x-4,
+.translate-y-6,
+.-translate-x-3,
 .rotate-3,
 .skew-y-12,
 .skew-x-12,
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
index e5ffdabd..bc32fb75 100644
--- a/tests/jit/relative-purge-paths.test.css
+++ b/tests/jit/relative-purge-paths.test.css
@@ -1,3 +1,7 @@
+.translate-x-5,
+.-translate-x-4,
+.translate-y-6,
+.-translate-x-3,
 .rotate-3,
 .skew-y-12,
 .skew-x-12,