ng-class 不会使用 tailwindcss 样式更新变量更改

Question

我使用 Angular 18 和 TailwindCSS。我想创建一个很酷的打字动画，每个单词都有不同的颜色。但是，当 currentColor 更新为下一个顺风颜色时，它不会显示正确的颜色，而仅显示黑色文本。有没有可能使用顺风颜色来解决这个问题？

我有以下代码：

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

顺风配置：

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'),
  ],
}

当我尝试使用例如预加载颜色时class="text-green-500"，删除 class="text-green-500" 后，正确的颜色将在我的打字动画中显示。 我也用

class="{{currentColor}}

测试过，但不起作用。当使用 css 样式类而不是 tailwind 时，它可以工作

Answer 1

您的配置未针对 Angular 进行调整。 因为在 Angular 中你使用的是 typescript 文件，而不是 javascript。您应该将

.ts

扩展添加到您的配置中。目前您只有

html

和

js

。这就解释了为什么如果您将这些类添加到您的

component.html

文件中，但如果您在

component.ts

中声明这些值，这些类就不起作用。

以下是 Angular 的配置，基于 Tailwind-Css 文档。

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