Reputation: 81
I'm just trying to dynamically set my background color:
let color =
this.table.state == tableState.FREE
? 'green'
: this.table.state == tableState.BOOKED
? 'yellow'
: 'red';
Or just to simplify it:
let color = 'red'
Then I just add 'bg-' and '-600' of the tailwind syntax:
this.TableUiConfig.color = 'bg-' + color + '-600'; // result should be 'bg-red-600'
Well, for some reason it doesn't work.
this.TableUiConfig.color = 'bg-' + color + '-600'; // DOES NOT WORK
this.TableUiConfig.color = 'bg-red-600'; // DOES WORK
When using concatenation:
Not using concatenation:
As I've read here I can use whitelist, so the purge thing doesn't care when I generate my own classes, (not knowing why it does it in the first place). Anyway, should I create a whitelist for all the classes I'm trying to use? Or is there another method to disable the purge?
Upvotes: 3
Views: 4558
Reputation: 1695
Tailwind is unable to generate classes if you don't include the entire class name in your source: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Upvotes: 1