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

Updated the code - Also tested it with both but does not work — Daniel12
– Daniel12, Commented Sep 30, 2024 at 12:19
does it work if you manually edit the html element and apply 'text-red-500' class to to it? Maybe you're missing the CSS code for those classes? — Shahar
– Shahar, Commented Sep 30, 2024 at 15:02

T. Jami · Accepted Answer · 2024-10-01 05:35:37Z

0

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: [],
}

answered Oct 1, 2024 at 5:35

T. Jami

1,1471 gold badge10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related