Safelist pattern for arbitrary values

[mastrup]

What version of Tailwind CSS are you using?
v. 3.0.23

I am trying to whitelist a set of arbitrary values since the classes is set within a CMS.
I need to include top-0% to top-100% and left-0% to left-100%.

I have tried to whitelist the following pattern:

safelist: [
    {
        pattern: /(left|top)-\[(0|10|20|30|40|50|60|70|80|90|100)%\]/,
    }
]

But when compiling I get the following error:

warn - The safelist pattern `/(left|top)-\[(0|10|20|30|40|50|60|70|80|90|100)%\]/` doesn't match any Tailwind CSS classes.
warn - Fix this pattern or remove it from your `safelist` configuration.
warn - https://tailwindcss.com/docs/content-configuration#safelisting-classes

So the question is: How do I whitelist a set of arbitrary values?

[adamwathan]

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

In your situation just do this:

safelist: [
    'top-[0%]',
    'top-[10%]',
    'top-[20%]',
    'top-[30%]',
    'top-[40%]',
    'top-[50%]',
    'top-[60%]',
    'top-[70%]',
    'top-[80%]',
    'top-[90%]',
    'top-[100%]',
    'left-[0%]',
    'left-[10%]',
    'left-[20%]',
    'left-[30%]',
    'left-[40%]',
    'left-[50%]',
    'left-[60%]',
    'left-[70%]',
    'left-[80%]',
    'left-[90%]',
    'left-[100%]',
]

You could get clever and generate programmatically if you wanted to as well:

safelist: [
    ...[...Array(10).keys()].flatMap(i => [`top-[${i*10}%]`, `left-[${i*10}%]`])
]

[mastrup]

Thanks!

I went with your programmatic solution - Clean and simple 🤩

[shivasaisagar18]

Thanks @adamwathan

Can you suggest me the pattern for my use-case

Example: classes: grid-cols-[1fr,2fr] grid-cols-[1.5fr,2fr]

[cipriancaba]

This should really be part of the docs Yeah you can only safelist using patterns against things that Tailwind would generate based on the config, not arbitrary values. Been going crazy over why this wouldn't work

[jwu-ice]

safelist: [
    ...[...Array(10).keys()].flatMap(i => [`top-[${i*10}%]`, `left-[${i*10}%]`]) 
]

I don't generate programmatically on build time

safelist: [
    'top-[0%]',
    'top-[10%]',
    'top-[20%]', 
    ...

But it's generate..

I think the difference is the same. Is everyone working well?
I using CRA

[damianof]

@adamwathan could pattern hod an array of multiple expressions? I.e.:

    pattern: [
        /^(bg|text|border|shadow|placeholder|outline|ring|rounded)+/,
        /^(p|m|px|py)+/
    ]

This is mostly for DX experience to avoid having a very long string for pattern.

Context: my current issue is I am building a highly dynamic theme system with dynamic components where the classes are only computed at run time, thus I have to let tailwind know in the app where i consume these components which classes to safe list. However, some can be really dynamic like "px-[2rem]" where the value 2rem is not known upfront as the consumer will pass only the value 2 tot he component (so that could be 2 or maybe 0.9 or anything else really)

[mikemike]

Sorry to resurrect this, but there are now options of pattern and variation. This article does a good job of explaining it and how it can work.

Makes it a lot more readable than code within the config, in my opinion.

[danielx-art]

What about safelististing arbitrary values for classes with selectors? For example, in my project I have a component that acceps a user input color as a prop abnd I want for it to have "hover:border-t-[${color}]". How can I safelist in this case? I didnt quite get this from the article you mentioned. And I also have some custom selectors as well, like "[data-state=open]:bg-color-[${color}]".

[damianof]

I agree. I think there is still work needed in Tailwind configuration to allow for better ways to safelist.

I write and publish components that rely on Tailwind as an external dependency and cannot control from the component library what Tailwind in the host application should safelist.

This is also true in a microfrontend architecture where the host app is the one that provides Tailwind and each microfrontend module app does not have any styles but relays on the host app styles.