[Prettier Plugin] Help - Any ways to format custom class object?

[ChiuMungZitAlexander]

<Modal
  classNames={{
    overlay: '',
    wrapper: '',
    inner: '',
    closeButton: '',
  }}
/>

// prettier.config.js
{
  tailwindAttributes: ["classNames"]
  tailwindFunctions: ['cn', 'clxs', 'cva'],
}

It seems neither tailwindFunctions nor tailwindAttributes will work for custom class object.

[julienborgeon]

Hey!

The plugin's tailwindAttributes option only sorts classes when the attribute value itself is a string (or a simple expression it understands). See the README: tailwindAttributes just tells the plugin which attributes to look at, not how to walk into nested object values.

In your case:

<Modal
  classNames={{
    overlay: '',
    wrapper: '',
    inner: '',
    closeButton: '',
  }}
/>

classNames is a single prop whose value is an object, and the plugin doesn’t (yet) traverse those object keys and format each string, which is why neither tailwindAttributes nor tailwindFunctions kicks in.

As a possible workaround, for now, you may wrap the values with a helper function that is handled by tailwindFunctions:

<Modal
  classNames={{
    overlay: cn('fixed inset-0 flex items-center justify-center'),
    wrapper: cn('rounded-lg bg-white shadow-lg'),
  }}
/>

and make sure cn is listed in tailwindFunctions (just try and tell me).

As far as I know there's no built-in way today to tell the plugin "also sort strings inside this custom object shape", so if this is important in your codebase it might be worth opening a feature request on the plugin repo?

Hope that helps a bit, even if it’s not the magic tailwindAttributes tweak you were hoping for ^^