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 during the build.