[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!

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

[weilinzung]

I understand the reasoning behind it, and it does make more sense for brand new apps. However, for existing projects upgrading from v3, it creates a challenge—unless v3 is going to be supported indefinitely. Clearer guidance or support for legacy setups would really help ease the transition.

[adamwathan]

Spent a few minutes looking at this — not sure where or why it's happening but the output is basically corrupt at points, for example, this should include .action-trigger somewhere but it's just a media query with no actual selector:

I can't reproduce this in the Lightning playground though:

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%3Ahost%20%7B%5Cn%20%20%5B_nghost-ng-c2464656717%5D%20%7B%5Cn%20%20%20%20.task-list%20%7B%5Cn%20%20%20%20%20%20.action-trigger%20%7B%5Cn%20%20%20%20%20%20%20%20%40media%20(width%20%3E%3D%20768px)%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20opacity%3A%200%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%20%20%20%20%20%20%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

So we will have to do some digging to figure out where in the pipeline we're getting unexpected output. My gut is it's a Sass/Tailwind v4 interop issue but not sure.

[weilinzung]

@wongjn Good catch! Does that mean we’ll need to wait for the Angular builder to fully support nested styles? I’m just a bit curious why this behavior changed in v4, especially since it worked fine in v3 that is also using PostCSS.

[wongjn]

It might mean you’ll need to wait for the Angular builder to fully support nested styles.

V4 uses native CSS nesting (in dev), whereas v3 doesn't. In production, v4 uses Lightning CSS to flatten the CSS, but it seems the Angular compiler doesn't set up the environment in a way that notifies Tailwind it is running a production build (i.e. when running ng build). It is commonly done by setting an environment variable like NODE_ENV=production but it seems this isn't done. However, this wouldn't be much help in dev anyway (ng serve).

[weilinzung]

@wongjn, is there a way to set the compile mode to production then when integrating to version 4? Just not sure if that could help.

[wongjn]

You can try in .postcssrc.json:

{
  "plugins": {
    "@tailwindcss/postcss": {
      "optimize": true
    }
  }
}

[weilinzung]

Turning it false or true won't help

[wongjn]

Seems to work locally:

But not in StackBlitz.

[weilinzung]

After clearing the local NX cache with "optimize": true, everything seems to be working correctly. I'm deploying to staging now to verify whether the production build behaves the same way.

Update: prod build is working as expected too.

Just to confirm, what are the trade-offs of enabling optimize mode?

[weilinzung]

Just curious why StackBlitz won't work the same way