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?
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>