Valid Angular class binding not recognized

[JoepKockelkorn]

What version of Tailwind CSS are you using?

v4.0.0-beta.9

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

Angular v19, using the @angular-devkit/build-angular:application builder, which uses PostCSS under the hood

What version of Node.js are you using?

v22.12.0

What browser are you using?

Brave v1.73.105

What operating system are you using?

macOS 15.2 (24C101)

Reproduction URL

https://github.com/JoepKockelkorn/tailwindcss-v4-beta-angular-class-bug

Describe your issue

If I use valid Angular class binding syntax to dynamically add a class in the following way, it is not recognized by tailwind:

• npm i
• npm start
• Go to http://localhost:4200/

<div [class.bg-red-500]="showRedBackground">This should have a red background</div>

There are workarounds, like using [class]="{ 'bg-red-500': showRedBackground }", but ideally all valid Angular syntax which uses valid static tailwind syntax should work.

[amy18sanchez]

Hello,

Like the dynamic class binding isn’t being recognized by Tailwind due to how the purge mechanism works in your setup. The workaround you found is a good temporary solution, but ideally, Tailwind should recognize all valid Angular syntax. You can try adding your Angular templates to the Tailwind config’s content array to prevent it from purging dynamic classes. Also, adding the classes you’re using to the safelist can ensure they aren't removed ReadTheory during the build.

[t0byman]

Still an issue in v4.0.8, hope it gets resolved soon :)

[RobinMalfait]

Hey!

This should be fixed and will be available in the next release. You can already try it if you want using the insiders version:

• npm install tailwindcss@insiders @tailwindcss/cli@insiders
• npm install tailwindcss@insiders @tailwindcss/postcss@insiders
• npm install tailwindcss@insiders @tailwindcss/vite@insiders

[weilinzung]

@RobinMalfait any news on this for official release?

In the latest 4.1.x, we still see the issue in Angular with

:host {
  ::ng-deep {
    .test {
      .mat-mdc-checkbox { 
         @apply pointer-events-none opacity-50; => ng deep here won't work with Tailwindcss4
      }

     .action-trigger {
        @apply hidden md:flex; => respnsove classes here won't work with Tailwindcss4
    }
}