How to safelist a pattern for all variants (including arbitrary variants)?

[vuolter]

Hello there!

Tailwind 3.1 comes with arbitray variants and it's great, really, but documentation https://tailwindcss.com/docs/content-configuration#safelisting-classes still lacks many details about variants, about what and how we can whitelist them.

For instance, if I want to preserve all classes ending with a color name, including their variants for some modifiers, I can set my tailwind.config.js this way:

const colors = {
  black: '#000000',
  white: '#FFFFFF',
}

const safelist = [
  {
    pattern: new RegExp(`.+-(${Object.keys(colors).join('|')})$`),
    variants: ['after', 'before', 'hover', 'selection'],
  }
];

module.exports = {
  ...
  theme: {
    colors,
    ...
  },
  safelist,
};

But this work only for a limited list of modifiers (after, before and so on...).

I'm guessing actually how to include all possible modifiers and also how to include arbitrary variants (I tried simply putting one there, but did not work).

Any advice for me?

Thank you.

[vuolter]

No one?

[olets]

See #7908 (comment)

you can only safelist using patterns against things that Tailwind would generate based on the config, not arbitrary values

[vuolter]

Definitely it's not what I was hoping for, but better than nothing... thanks.

[senakster]

If you can set a {"--var-key" : arbistrary-value} on your element style you can read it in a tailwind-class: bg-[var(--var-key)]

[vuolter]

yeah, it's now possible to do so!

[lordferro]

works great, but in case if i have text color and font size, tailwind uses class text for both, and it cannot identify what is font size ad what is for color, so variable with font size goes to property color.

[rozsazoltan]

@lordferro https://v3.tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Sometimes it really is ambiguous though, for example when using CSS variables:

<div class="text-[var(--my-var)]">...</div>

In these situations, you can “hint” the underlying type to Tailwind by adding a CSS data type before the value:

<!-- Will generate a font-size utility -->
<div class="text-[length:var(--my-var)]">...</div>

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">...</div>

So in your case:

<div class="tw-text-[color:var(--textColor)] tw-text-[length:var(--fontSizeXss)] sm:tw-text-[length:var(--fontSizeXs)] md:tw-text-[length:var(--fontSizeSm)]">...</div>