Focus visible doesn't work with @apply in CSS module

[agusterodin]

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.

[adamwathan]

Hey! Can you please provide a proper reproduction (a repo we can clone that replicates your particular setup)?

[agusterodin]

Yes, will do tomorrow morning

[gynekolog]

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.

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

[agusterodin]

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.

reproduction: https://codesandbox.io/s/youthful-sky-9ktgf?file=/src/pages/index.tsx

Thank you. I was about to do it, I promise 😀

[agusterodin]

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

[agusterodin]

In some scenarios this seems to be broken in 3.0 alpha 1 as well (not just alpha 2)

[Jackardios]

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

[hi-reeve]

got the same issues, working with transform and ring using @apply.

[Andrey-Bazhanov]

I have same issues in v3

[finkrer]

Same issue with backdrop filters. No --tw-backdrop-filter is defined, so it does not work.

[agusterodin]

This issue appears to be resolved in Chrome but not Safari