[v4] Safelist?

[ev3rlost]

With no tailwind.config.js in v4 anymore - how can we implement the safelist: [] option in v4? Is there a @safelist directive?

[adamwathan]

Not solved yet but something we're going to look into soon. I secretly wish no one used this feature though 😄

[ev3rlost]

Thanks for the info Adam! I imagine it must be a pain to implement 😄. But there are so many use-cases for it, specially for dynamic class names.

I understand the docs instead of writting like this:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

... you have to write like this:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Thats using Blade. But what about Alpines conditional classes?

<div :class="error ? 'text-red-600' : 'text-green-600'"></div>

The above doesn't seem to work.

Would you suggest to just pop a div on the layout file and apply all those conditional classes to it and hide the div? That's what I've done but it seems realy hacky 😄

[ISOR3X]

Hi, just wondering if there is an update on this. I am using a variable name in my class name (something like bg-[rgb(var(--color-${color_var}) and without safelisting I am not sure how to get Tailwind to recognize the classes properly.
Alternatively, if anyone has a 'better' way of handling these situations please feel free to share them.

[wongjn]

You could consider using the style attribute like:

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

[ISOR3X]

You could consider using the style attribute like:

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

While that would solve the issue, it does prevent using it with Tailwind Variants without it becoming quite complex I think.
For reference I would have at least two button styles where each would have a different background color.

[wongjn]

If you are using Tailwind variants, you shouldn't need to use interpolation at all:

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: '…',
  variants: {
    color: {
      primary: 'bg-[rgb(var(--color-primary))]',
      secondary: 'bg-[rgb(var(--color-secondary))]',
    },
  }
});

Or otherwise, consider providing more context to your desired usage.

[ISOR3X]

If you are using Tailwind variants, you shouldn't need to use interpolation at all

Since I have like 15 different colours I didn't want to type them all out. I got the idea from Nuxt UI v3, but I assume they are doing something additional that allows it to work.

[robsontenorio]

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

(not using tailwind.config.js)

[adamwathan]

Not yet, until we tackle it I would just recommend creating a safelist.txt file somewhere that has all the classes you want to safelist and Tailwind will automatically scan that and include them. I really, really think the pattern-based stuff is a huge anti-pattern so I'm hesitant to make it too easy, we never need safelisting at all in any of the projects we work on so I'm really not convinced it's necessary, feels more like a band-aid.

How are you using it in your projects?

[robsontenorio]

@adamwathan

Ex: OrderStatus is a table. It contains short and long description about each status. And a extra column “color” with tailwind classes.

<span class=“{{ $order->status->color }}”> {{ $order->status->name }} </span>

More details about status here …

So, I use regex to safelist this color variations.

[Meatclump]

Not yet, until we tackle it I would just recommend creating a safelist.txt file somewhere that has all the classes you want to safelist and Tailwind will automatically scan that and include them. I really, really think the pattern-based stuff is a huge anti-pattern so I'm hesitant to make it too easy, we never need safelisting at all in any of the projects we work on so I'm really not convinced it's necessary, feels more like a band-aid.

How are you using it in your projects?

If I fetch content into my reactive app from a wordpress backend, is there a better way to include a predefined set of classes that the user can utilize than through a safelist?

[CanRau]

I guess it's always possible to include all supported classes somewhere, be it a component's allowed props or maybe even a text file you import somewhere, right?

[robsontenorio]

Of course this works. But , it’s not the same of safelist feature.