Tailwind + Angular does not accept class names generated by concatenation

Question

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?

Answer 1

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