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.

[quentinjeanningros]

@philipp-spiess sorry but is it possible to make that back as an issues ? As long as it's blocking for some of us, and we are multiples to wait this to go on v4, it should be cool to know the dev state of it.

When I say multiples I think there is a lot, as long as, there are already a lot of messages in discussion, all agency I worked for, also wait this to switch their code base ect...

[philipp-spiess]

Hey! I'm sorry for your frustration here but wanted to give you some context on the two main issues with safelist in v4 and why we haven't brought it back yet:

• We have seen a lot of configurations where the pattern was configured so broad that the CSS that was ended up being created included thousands of utilities from which only a fraction was used at runtime. I think even your case (from-${themeColor}), I would be shocked if you really need access to almost all 250 colors for the from-* utility?
• v4 doesn't have a discrete set of utilities anymore, e.g. the margin utilities now accept any number value, so m-123123897 would also generate a class name. This would unfortunately mean that either: allow list would generate fewer utilities than you are able to use (at which point it's questionable how this feature is helpful?) or that it will very easily generate infinite stylesheets which is also not helpful.

In your case, my recommendation would be to try and limit the colors for your dynamic classes so that Tailwind CSS can properly detect all used classes and can strip out unused ones.

Regarding the move to discussions: We reserve issues for bug reports with added reproductions, that's why I've moved this to a discussion instead. Devs will still read this I can assure you!

[quentinjeanningros]

Hello, make complete sens now.

Love the solution you shared, it's even more optimised than generate a lot of unused classes
and I consider that is clearly a good solution. You can pass this discussion as solved.

Thanks a lot for this

[godoplay]

I was using the beta version, and everything was working well. Now, I'm using the latest version, 4.0.9, and the styles are broken.

When I check the :root colors, I no longer see --tw-color-overlay, and some others are broken too, like fonts with custom names (such as --font-body, etc.).

It is probably because, in my Nuxt application, the overlay is not immediately available since the initial render does not include it.

Beta was working more stably :/

[JayBizzle]

So, how are people detecting Tailwind classes from content in a database that has been created by content editors in a CMS?

[bozzhik]

it's a bit of a strange technical solution, but nevertheless
bozzhik/portfolio@fa16ffc

[reeucq]

im facing the same issue, i use payload cms and the only good solution i found is basically when i save a page with custom html (with tailwind embedded in it), i spawn a tailwind cli process which generated the css for that page and stores it in db and when i render that page in my external frontend, it fetches that css from the db and embeds it inline, i don't know if its a good solution though, any suggestions would be appreciated

[CanRau]

There's now @source inline("underline")
docs

more discussions with examples