Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Focus visible doesn't work with @apply in CSS module
**What version of Tailwind CSS are you using?**

3.0.0-alpha.2

**What build tool (or framework if it abstracts the build tool) are you using?**

Next 12.0.4

**What version of Node.js are you using?**

v16.13.0

**What browser are you using?**

Chrome

**What operating system are you using?**

MacOS

**Reproduction URL**

Test.module.css
```
.testClass {
  @apply focus-visible:ring-4 focus-visible:ring-teal-300;
}
```

**Describe your issue**

Focus visible doesn't work using @apply with CSS modules as of 3.0 alpha 2. It works fine if I revert back to alpha 1.


Hints:
Hey! Can you please provide a proper reproduction (a repo we can clone that replicates your particular setup)?
Yes, will do tomorrow morning
Same issue with `focus` and tailwindcss 2.2.19.

The issue comes with @apply in CSS module and without using the same utilities in the global css file or in className.
![image](https://user-images.githubusercontent.com/4593089/143284250-132e8a5c-3f5a-46ad-8e97-81aa23882e1f.png)


reproduction: https://codesandbox.io/s/youthful-sky-9ktgf?file=/src/pages/index.tsx

edit: updated example with tailwindcss 3.0.0 -> https://codesandbox.io/s/patient-platform-pm5qx?file=/src/pages/index.tsx
> Same issue with `focus` and tailwindcss 2.2.19.
> 
> The issue comes with @apply in CSS module and without using the same utilities in the global css file or in className. ![image](https://user-images.githubusercontent.com/4593089/143284250-132e8a5c-3f5a-46ad-8e97-81aa23882e1f.png)
> 
> reproduction: https://codesandbox.io/s/youthful-sky-9ktgf?file=/src/pages/index.tsx

Thank you. I was about to do it, I promise 😀
Can confirm that when just using normal utility classes focus visible rings work fine (--tw-ring-inset and --tr-ring-offset are set to /* */ if I don't explicitly use them) whereas when using @apply inside a CSS module I get these errors and the ring doesn't work

<img width="572" alt="Screen Shot 2021-11-26 at 3 47 35 PM" src="https://user-images.githubusercontent.com/10248395/143636780-426c2116-4862-4f46-92a6-a44db490bcf0.png">
<img width="610" alt="Screen Shot 2021-11-26 at 3 47 41 PM" src="https://user-images.githubusercontent.com/10248395/143636785-b817e8e1-1e8d-46be-a6b1-3bb3aff84f12.png">



In some scenarios this seems to be broken in 3.0 alpha 1 as well (not just alpha 2)
Same issue with :focus, I tried 2.1.2, 2.2.19, 3.0.0-alpha.2 and this problem is encountered everywhere with the transform and ring properties.

Next.js 12 + CSS Modules
<img width="580" alt="Screenshot 2021-12-07 at 21 50 42" src="https://user-images.githubusercontent.com/24757335/145088947-5949be0d-7991-41c7-97d9-a36fb04f3fc6.png">

<img width="460" alt="Screenshot 2021-12-08 at 22 14 52" src="https://user-images.githubusercontent.com/24757335/145269835-ced115c7-0800-41c7-ad55-ee8703685ce8.png">

got the same issues, working with transform and ring using @apply.
I have same issues in v3
![image](https://user-images.githubusercontent.com/22712590/145550271-3a88bc34-e0ab-42ce-9077-b0729373f51f.png)
Same issue with backdrop filters. No --tw-backdrop-filter is defined, so it does not work.
This issue appears to be resolved in Chrome but not Safari

Patch:
diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js
--- a/src/lib/expandTailwindAtRules.js
+++ b/src/lib/expandTailwindAtRules.js
@@ -140,17 +140,28 @@ export default function expandTailwindAtRules(context) {
       variants: null,
     }
 
-    // Make sure this file contains Tailwind directives. If not, we can save
-    // a lot of work and bail early. Also we don't have to register our touch
-    // file as a dependency since the output of this CSS does not depend on
-    // the source of any templates. Think Vue <style> blocks for example.
-    root.walkAtRules('tailwind', (rule) => {
-      if (Object.keys(layerNodes).includes(rule.params)) {
-        layerNodes[rule.params] = rule
+    let hasApply = false
+
+    root.walkAtRules((rule) => {
+      // Make sure this file contains Tailwind directives. If not, we can save
+      // a lot of work and bail early. Also we don't have to register our touch
+      // file as a dependency since the output of this CSS does not depend on
+      // the source of any templates. Think Vue <style> blocks for example.
+      if (rule.name === 'tailwind') {
+        if (Object.keys(layerNodes).includes(rule.params)) {
+          layerNodes[rule.params] = rule
+        }
+      }
+
+      // We also want to check for @apply because the user can
+      // apply classes in an isolated environment like CSS
+      // modules and we still need to inject defaults
+      if (rule.name === 'apply') {
+        hasApply = true
       }
     })
 
-    if (Object.values(layerNodes).every((n) => n === null)) {
+    if (Object.values(layerNodes).every((n) => n === null) && !hasApply) {
       return root
     }
 


Test patch:
diff --git a/tests/apply.test.js b/tests/apply.test.js
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js'
 
 import { run, html, css } from './util/run'
 
@@ -810,3 +811,39 @@ it('should be possible to apply user css without tailwind directives', () => {
     `)
   })
 })
+
+fit('apply can emit defaults in isolated environments without @tailwind directives', () => {
+  let config = {
+    [DEFAULTS_LAYER]: true,
+    experimental: { optimizeUniversalDefaults: true },
+
+    content: [{ raw: html`<div class="foo"></div>` }],
+  }
+
+  let input = css`
+    .foo {
+      @apply focus:rotate-90;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .foo {
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-rotate: 0;
+        --tw-skew-x: 0;
+        --tw-skew-y: 0;
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        --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));
+      }
+      .foo:focus {
+        --tw-rotate: 90deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})