Add the ability to pass a regular expression for tailwindAttribues

[Holiden]

Hello!

Maybe there is an option to add passing a regular expression to the tailwindAttributes parameter.

// .prettierrc
{
  "tailwindAttributes": [/class-\w+/]
}

[thecrypticace]

There is not an option for this currently and Prettier itself doesn't let you specify regex literals as options so the best we could do if we supported it was a string of just the pattern portion. However, we use this list of attributes to create a list of matching attributes across languages. For example, with tailwindAttributes: ["class"] we allow matching on:

• class
• [class] (Angular)
• :class (Vue)
• v-bind:class (Vue)

We even detect when you've specified a dynamic binding like v-bind:class in the attribute list and will also match class as well.

Since this has historically been a direct match and we can't use regex literals there's not a good way to do this in a backwards compatible manner. Some people might want to match attributes with characters like $ that have special meaning in a regex. If we changed this those would have to change to be escaped. It would also make parsing / building the matching attribute list more complicated.

Will think on this some but I think it's unlikely to happen right now

[muhammedogz]

I’d like to propose a potential improvement to avoid breaking existing projects that rely on dynamic/regexp-style class names inside template strings.

Introduce a new config option (e.g., allowRegexDynamicClasses: true) in the plugin config to preserve dynamic segments (like ${...}) when they are embedded in Tailwind class strings. This way, existing projects that depend on these patterns won’t be silently broken when upgrading.

This could help maintain backwards compatibility while still moving forward with the stricter behavior by default.

This would be especially useful because Tailwind CSS IntelliSense already supports similar patterns via settings like:

"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    "[a-z-]+ClassName" // support everything that ends with ClassName
  ],

So it would be great if the formatter could be aligned with this level of flexibility.

[evgeniyworkbel]

@thecrypticace the feature should be implemented because of increased demand. It'll improve DX and increase downloads of package. My collegues and I love this package, but suffer from listing many className attributes to have sorting. Specifying regex will become a killer-feature! As a frontend engineer, I'd like to set tailwindAttributes: "[a-z-]+ClassName" once and do not remember about the config when I create new react classname-props

I hope you implement the feature in next month, especially @muhammedogz gave the idea of solution to do this in a backwards compatible manner