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

Question

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;
      }
    }

Tailwind config:

module.exports = {
  darkMode: 'selector',
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js", "./node_modules/flowbite/**/*.js"],
  theme: {
    extend: {
      scale: {
        '101': '1.01',
        '102': '1.02',
      },
      boxShadow: {
        'btn-1': '0 1px 0 rgba(27,31,35,0.1)'
      },
      colors: {
        'dark-mode': '#050505',
        'dark-mode-inside': '#1f2937',
        'dark-mode-inside-hover': '#2a3748',
        'title-dark-mode-text': '#eaeaea',
        'dark-mode-text': '#909090',
        'dark-mode-text-hover': '#787878'
      },
      keyframes: {
        fadeInDown: {
          '0%': {opacity: '0', transform: 'translateY(-20px)'},
          '100%': {opacity: '1', transform: 'translateY(0)'},
        },
        fadeInUp: {
          '0%': {opacity: '0', transform: 'translateY(20px)'},
          '100%': {opacity: '1', transform: 'translateY(0)'},
        },
        fadeInRight: {
          '0%': {opacity: '0', transform: 'translateX(-20px)'},
          '100%': {opacity: '1', transform: 'translateX(0)'},
        },
        fadeInLeft: {
          '0%': {opacity: '0', transform: 'translateX(20px)'},
          '100%': {opacity: '1', transform: 'translateX(0)'},
        },
        fadeInSlow: {
          '0%': {opacity: '0'},
          '100%': {opacity: '1'},
        },
      },
      animation: {
        fadeInDown: 'fadeInDown 0.5s ease-out forwards',
        fadeInUp: 'fadeInUp 0.5s ease-out forwards',
        fadeInRight: 'fadeInRight 0.5s ease-out forwards',
        fadeInLeft: 'fadeInLeft 0.5s ease-out forwards',
        fadeInSlow: 'fadeInSlow 0.5s ease-out forwards',
        fadeIn: 'fadeIn 0.5s ease-out forwards',
        bounce: 'bounce 1.5s infinite',
      }
    },
  },
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/forms'),
  ],
}

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

Answer 1

Your configuration is not adjusted for Angular. Since in Angular you are using typescript files, instead of javascript. You are supposed to add the .ts extension to your configuration. Currently you got only html and js. This explains why the classes work if you add them into your component.html file but not if you declare the values in the component.ts.

Here is how the configuration should look like for Angular, based on Tailwind-Css Docs.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}