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.

[ljwun]

I recently encountered the same issue, and my use case involves dynamically updating class name in code. I discovered that that using CSS variables is an effective solution. The reason this works is that the literal string var(--custom-property) is treated as a static value, which Tailwind's purge system can recognize. This allows us to dynamically update styles while still benefiting from Tailwind's utility classes.

---

Applying the Concept to Specific Scenarios

Taking @shivasaisagar18 's example:

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

This is similarly to @damianof's case:

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)

We can use a placeholder like grid-cols-[var(--custom-grid-cols-property)] in our Tailwind classes. Then, we dynamically set the value of the CSS variable in the style attribute, such as:

'--custom-grid-cols-property': `${firstColsWidth}, ${secondColsWidth}`

This approach allows us to adjust the grid column widths dynamically using JavaScript.

Here is the complete code example in react:

import type React from "react"
import { useState } from "react"

interface CustomGridProps extends React.HTMLAttributes<HTMLDivElement> {
  firstColWidth?: string
  secondColWidth?: string
}

export function CustomGrid({
  className,
  children,
  firstColWidth = "1fr",
  secondColWidth = "2fr",
  ...props
}: CustomGridProps) {

  return (
    <div
      className={`grid grid-cols-[var(--custom-grid-cols-property)] ${className}`}
      style={
        {
          "--custom-grid-cols-property": `${firstColWidth} ${secondColWidth}`,
        } as React.CSSProperties
      }
      {...props}
    >
      {children}
    </div>
  )
}

---

Demo

The result demonstrates how the grid column widths can be updated dynamically at runtime using the provided props.

Screenity.video.-.Jan.23.2025.webm

[mario-petrovic]

This is a great workaround the dynamic classes arbitrary values limitation. I hope someone else sees this also, it helped me a lot.
Good work and thanks!