Tailwindcss classes not generated when used with angular class binding. #16801
Description
What version of Tailwind CSS are you using?
v4.0.8
What build tool (or framework if it abstracts the build tool) are you using?
angular 19.1.7, postcss 8.5.3
What version of Node.js are you using?
node 23.8.0
What browser are you using?
Microsoft Edge
What operating system are you using?
Linux
Reproduction URL
N/A
Describe your issue
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
@Component({
selector: 'app-button, [app-button]',
imports: [NgClass],
templateUrl: './button.component.html',
styleUrl: './button.component.scss',
host: {
'[attr.role]': "'button'",
'[attr.variant]': 'variant()',
'[ngClass]': `{"variant": variant(), "no-variant": !variant() }`,
'[class]': '"bg-gradient-to-b px-6 py-3 rounded-3xl from-5%"',
'[class.from-secondary-light]': `variant() === 'secondary'`, // tailwindcss class not generated
'[class.to-secondary]': `variant() === 'secondary'`, // tailwind class not generated
'[class.from-5%]': `variant() === 'secondary'`, // tailiwind class not generated
'[class.from-1%]': `variant() === 'primary'`, // tailwind class not generated
'[class.from-light-blue]': `variant() === 'primary'`, // tailiwind class not generated
'[class.to-primary]': `variant() === 'primary'`, // tailwind class not generate
},
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonComponent {
variant = input<'primary' | 'secondary'>('secondary');
/** The tailwindcss color to use as button shadow */
shadow = input<string>('blue-500');
/** The tailwindcss color to use as button background */
background = input<string>('blue-600');
}As shown on the piece of code above, any tailwindcss classes used with angular class binding [class.xxx-xxx] are not generated.