如何将 TailwindCSS3 与 ngClass 一起使用？

Question

我正在尝试在 ngClass 中的函数中使用 TailwindCSS。

在函数中生成了 TailwindCSS 类以维护我的模板，但它不起作用。

请检查下面我的代码

*.component.html

...
<div class="grid grid-cols-12">
  <div ngClass="generateCol(fieldUI)">
...

*.component.ts

...
  generateCol(fieldUI: any) {
    return `col-span-12 sm:col-start-${fieldUI.startCol} sm:col-end-${fieldUI.endCol}`;
  }
...

TailwindCSS3 不可能吗？

Answer 1

似乎可以让它与 ngClass 和 Tailwindcss v3.0.13 以及 Angular 13.1.3

一起使用

下面是我的解决方案：

*.component.html

<button [ngClass]="getValidateStyle()" 
  type="button" 
  (click)="buttonClicked($event)">
    <span class="px-2">{{text}}</span>
</button>

*.component.ts

  @Output() onClick = new EventEmitter<any>();
  @Input() text: string|any;
  availableStyles: string[] = ['primary', 'secondary'];
  @Input() styleName!: string | "primary";

  constructor() { }

  ngOnInit(): void {
  }

  getValidateStyle(){
   if(this.availableStyles.includes(this.styleName))
   {
     return this.styleName;
   }   
   return "primary";
  }

  buttonClicked(event: any) {
    this.onClick.emit(event);
  }

*.component.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{

    .primary{

        @apply px-2 flex rounded items-center text-sm bg-sky-100;
    }
}

@layer components{

    .secondary{

        @apply px-2 flex rounded items-center text-sm bg-sky-500;
    }
}

按钮的用法如下所示：

somefile.component.html

  <app-custom-button 
    styleName="secondary"
    text="This is a second button"
    (onClick)="logToConsole($event)">
  </app-custom-button>

somefile.component.ts

  logToConsole(event: any): void{
    console.log("Button clicked", event);
  }

如何将 TailwindCSS3 与 ngClass 一起使用？

How to use TailwindCSS3 with ngClass?

ng-class

angular

tailwind-css