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.

[markau]

This is completely broken.

Of these, only one colour displays on the page when using them dynamically.

  safelist: [
    "bg-blue-300",
    "bg-green-300",
    "bg-yellow-300",
    "bg-orange-300",
    "bg-purple-300",
    "bg-green-300",
    "bg-red-400",
    "bg-orange-400",
]

[cesswhite]

It's true, the safelist isn't working correctly, and having all the classes in a .txt file doesn't seem viable, as I need to include all the bg-gradient-{direction}, via-{}, from-{} classes, which add up to more than 100 classes

[ic-768]

Am also facing the same issue. Have been relying on classes like ${borderWidth} border-${color}-${colorIntensity}, and the removal of safelist is a blocker for me.

[vjanssens]

I don't have a lot of generated colors so ended up creating a tailwind-safelist.blade.php in my Laravel project and adding each color to it as;

<div class="text-green-600"></div>
<div class="text-yellow-600"></div>
<div class="text-red-600"></div>

This get's picked up by the Tailwind compiler and works.

[mbrowne]

FYI for this approach of just ensuring that all the class names are in the code somewhere, they don't have to be used on HTML elements...you could just put them all in a code comment and it should pick them up.

[robsontenorio]

An solution is to enable support of safelist inside app.css , so we move away from JS config and have same behavior as before.

Because is just very boring to hardcode those classes in somewhere.

[faileon]

The whole v4 update is a fascinating rollercoaster of emotions. Half of the things from v3 are missing and I am baffled how could this even be released in this state. Back to v3 boys and girls.