[v4] Regression: Media queries inside @apply not working as expected compared to v3

[weilinzung]

What version of Tailwind CSS are you using?

v4.1.11

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

Angualr Materail - NG20

What version of Node.js are you using?

v20.19.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-smcvdl5w?file=src%2Fapp%2Fchecklist.scss

Describe your issue

In Tailwind CSS v4, applying utility classes using @apply inside nested media queries (e.g., @apply md:... or hover:md:...) within SCSS context does not behave as expected. This pattern worked in Tailwind CSS v3 but appears broken in v4.

In particular, combining @apply with responsive and pseudo-class utilities inside Angular's SCSS context (::ng-deep) no longer compiles or applies styles as it used to.

---

Example SCSS Code Illustrating the Problem:

@use '@angular/material' as mat;
@reference 'tailwindcss';

:host {
  ::ng-deep {
    .task-list {
      @include mat.form-field-density(-1);

      @apply hover:md:bg-red-500; // ❌ Not working in v4, worked in v3

      &:hover {
        @apply md:bg-red-500; // ❌ Not working in v4, worked in v3
      }

      .mdc-label {
        @apply font-medium text-red-500; // ✅ Still works
      }

      .mat-mdc-checkbox-checked {
        @apply pointer-events-none opacity-50;

        .mdc-label {
          @apply line-through!; // ✅ Still works
        }
      }

      .action-trigger {
        @apply md:opacity-0; // ❌ Not working as it did in v3 — no longer hidden on large screens
      }
    }
  }
}

These patterns are used widely across our large Angular application, and after the v4 upgrade, many component styles have silently broken. While base utilities like @apply text-red-500 still function, any usage of @apply with media queries or pseudo-classes(hover,placeholder...) appears to be ignored or stripped during build.

Impact

This is a critical issue for us:

• We have a large codebase heavily reliant on these patterns.
• Refactoring hundreds of components manually would be a major setback.
• There was no mention of this change in the upgrade guide as of now.

Please confirm:

• Is this behavior expected in Tailwind CSS v4?
• Was support for @apply + media/pseudo utilities removed by design?
• If so, is there a workaround or plugin we can adopt short-term?

Any guidance or fix would be hugely appreciated. We're happy to provide further context or contribute to a fix if this is unintended.

Thank you!