ng-class does not update on variable change using tailwindcss styles

I use Angular 18 and TailwindCSS. I wanted to create a cool typing animation with different colors per word. However, when currentColor updates to the next tailwind color, it does not show the proper color but only black text. Is there a possibility to fix that using tailwind colors?

I have the following code:

<span class="relative">
<span [ngClass]="currentColor">{{ displayText }}</span>
</span>


keywords = ['Java', 'AngularJS', 'Typescript'];
colors = ['text-red-500', 'text-blue-500', 'text-green-500'];
currentWordIndex = 0;
displayText = '';
isDeleting = false;
typingSpeed = 150;
deletingSpeed = 100;
currentColor = this.colors[0];

ngOnInit() {
this.startTyping();
}

startTyping() {
const currentWord = this.keywords[this.currentWordIndex];
const currentLength = this.displayText.length;

if (this.isDeleting) {
this.displayText = currentWord.substring(0, currentLength - 1);
if (this.displayText === '') {
this.isDeleting = false;
this.currentWordIndex = (this.currentWordIndex + 1) % this.keywords.length;
this.currentColor = this.colors[this.currentWordIndex];
console.log(this.currentColor);
}
} else {
this.displayText = currentWord.substring(0, currentLength + 1);
if (this.displayText === currentWord) {
this.isDeleting = true;
}
}


When i try to preload the colors using e.g. class="text-green-500", the proper color will be shown in my typing animation after class="text-green-500" is removed. I also tested it with class="{{currentColor}} but it does not work. When using css style classes instead of tailwind, it works

Continue reading...