How to use TailwindCSS3 with ngClass?

Question

I'm trying to use TailwindCSS in function inside ngClass.

TailwindCSS classes were generated in function to maintain my template but it doesn't work.

Please check my code below

*.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}`;
  }
...

Is it impossible with TailwindCSS3?

Answer 1

Adding an answer here because this is the top result when looking this up. Tailwind now supports ngClass. Below is a quick example of a p tag that is invisible if there are no errors, and visible with red text if there are.

<p
    [ngClass]="{ 
      'visible text-red-600': fieldError(usernameContName, authForm, 'required'), 
      invisible: !fieldError(pwContName, authForm, 'required') 
    }">
    Username required.
</p>