Skip to content

Conversation

LokiWasHere
Copy link

@LokiWasHere LokiWasHere commented Oct 13, 2025

This PR adds support for using regular expressions in both the tailwindAttributes and tailwindFunctions options. Regular expression patterns must be wrapped in strings as Prettier itself does not support regex literals for options (since all Prettier options are representable as JSON).

Here's an example that considers:

  • all data attributes to be classes
  • all attributes ending in the word "classes", case-insensitively
  • any function or tagged template called classList or styleList
{
  "tailwindAttributes": ["/data-.*/", "/.*classes$/i"],
  "tailwindFunctions": ["/(class|style)List/"]
}

Before (HTML):

<div data-class="sm:p-2 p-0" data-theme="dark:bg-black bg-white">

After (HTML):

<div data-class="p-0 sm:p-2" data-theme="bg-white dark:bg-black">

Before (JSX):

export function Home() {
  return <MyComponent enterClasses="active:opacity-50 opacity-25" exitClasses="active:opacity-25 opacity-50">
}

After (JSX):

export function Home() {
  return <MyComponent enterClasses="opacity-25 active:opacity-50" exitClasses="opacity-50 active:opacity-25">
}

Before (JS):

let baseClasses = classList([
  "sm:p-2 p-0",
])

let styleClasses = styleList([
  "sm:p-2 p-0",
])

After (JS):

let baseClasses = classList([
  "p-0 sm:p-2",
])

let styleClasses = styleList([
  "p-0 sm:p-2",
])

And exact matches still work as they did before and can also be combined with regex patterns:

{
  "tailwindAttributes": ["myClasses", "/.*List/"],
}

Before (HTML):

<div myClasses="sm:p-2 p-0" enterList="sm:p-2 p-0" exitList="sm:p-2 p-0">

After (HTML):

<div myClasses="p-0 sm:p-2" enterList="p-0 sm:p-2" exitList="p-0 sm:p-2">

Framework Support

Just like with existing static attributes we automatically generate regex patterns that match Vue and Angular attribute bindings.

  • In Vue the pattern /data-.*/ will also match :data-*="…" and v-bind:data-*="…"
  • In Angular the pattern /data-.*/ will also match [data-*]="…"

Closes #399
Fixes #373

@thecrypticace thecrypticace self-assigned this Oct 13, 2025
@thecrypticace thecrypticace changed the title Add regex attribute compatibility Support regex matches for attributes and function names Oct 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add the ability to pass a regular expression for tailwindAttribues

2 participants