Safelist alternative

[ic-768]

My company's app has an integrated component library, that creates classes programmatically, like so:

active:border-${color}-${colorIntensity},
isActive && `border-${color}-${colorIntensity}

We used to be able to safelist all of these, by providing a regex pattern to safelist, e.g.:

    {
      pattern:
        /border-(zinc|red|amber|lime|emerald|sky|blue|violet)-(50|100|200|300|400|500|600|700|800|900|950)\/(50)$/,
      variants: ["hover", "active"],
    },

Now with the safelist not supported in v4, the only solution I can find for cases like these is manually inputting all the classes in a text file so that they can be parsed. Needless to say, I'd rather not do that.

Is there any other solutions for cases like this?

[Skoua]

A workaround could be to list all classes in a unused file and source it like so:

@source "./safelist.css";

[ic-768]

Sure, but unfortunately not very efficient when you're dealing with hundreds of permutations of different properties and values.

[landykos]

@ic-768 Our solve for this was to create a JS file that creates all the safelist classes and outputs them into a txt file that is in our theme code that tailwind watches during our build process. Not ideal but it works better then typing out all the permutations.

Used an array to mimic the pattern style.

[landykos]

Also we did this for theme vars as well ;)