Safelist support in V4

[quentinjeanningros]

Request

Is it possible to make safelist back in another way?

In v3 safelist helped to generate classes even if they are not used. However, it's no longer possible in V3, so dynamic classes like this from-${themeColor}-gradient-start is no longueur possible.

Existing placeholder solution why not use them ?

As mentioned by contributors, solutions exist if you really need to go to v4

• Generate classes in a safelist.txt
• Or use the new variable support

However, no built-in solution exists, which I wait to upgrade.

Why ? Those solution works I tried them but:

• Generate classes in a safelist.txt -> not autonomous and a bit ugly solution
• Or use the new variable support -> not compatible with Tailwind merge as long as style override classname

TLDR

First I know that is already mentioned here and contributors work on it.

• [v4] Safelist?

I created an issue to know the state of this feature as long as it's the only thing that prevent me from going to V4.

Suggestion

As mentioned in the Discussion [v4] Safelist? @safelist is the best solution.

Maybe something like this could do the job ?

@theme {
 @safelist --color-lavender: #ad59cf;
  ...

Even if it generates too much (text, bg, border, stroke, fill, from, to, hover, focus, group-hover ...), it's better than nothing.

I think the common use of safelist was to ensure dynamic design, so a lot of configs looked like this.

  safelist:  [
    {
      pattern:
        /(text|bg|border|from|to|stroke|fill)-(acid|bloody|rust|mango|lavender|ocean|error|warning|success|info)-(hover|content|content-hover|gradient-start|gradient-end)/,
      variants: ['hover', 'focus', 'group-hover', 'group-hover/subtitle'],
    },
  ],

And edge case like 'group-hover/subtitle for sure can be handled by adding a class manually.