Safelist in V4

[SalarHoushvand]

It seems that V4 is not recognizing the colors implemented in the backend (if you are not using the full class name like text-{{ $color }}) . In version 3, I used to safelist them as shown below. How should I handle this in V4?

tailwind.config.js in v3:
, { pattern: /(bg|text)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)$/, variants: ['dark'] },

[wongjn]

You could consider using the style attribute like:

<div style="color: var(--color-{{ $color }})">

[maheshBawa]

we could do this in v3 as well. but we're using like text-${color}-500, so we can use shades of the color, therefor how can we use shades with this

. this is not a solution.

[kerryj89]

I believe regex patterns and/or variants don't work in v4. In v4 I have to list all 12 statically, e.g. text-left, sm:text-left, md:text-left, lg:text-left, text-center, sm:text-center, and so on.

The following pattern works in v3 but not in v4:

{
  pattern: /text-(left|center|right)/,
  variants: ['sm', 'md', 'lg']
}

[robsontenorio]

Is there any news on how safelist will work in v4?

(not using tailwind.config.js)

[SalarHoushvand]

Nope, so far the only method seems to be working is to have a file with all those classes in it so Tailwind can generate them.