[Prettier Plugin] Auto sort Tailwindcss classes outside of class/className attribute

[Mohsenvaziri]

Hi!

First of all, thank you so much for your great job, we enjoy our work much more while producing better products because of your efforts. I appreciate it 👍.

We love the auto-sorting future in our team, it is a really helpful tool.
The only problem is it works only when you write you're classes inside class / className attributes, which is not always the case in the real world.
We tried to find a way to make it work but we couldn't find a good solution.

Is there already a solution for it?
If not, do you have any plans to implement it in the future?

[cyrus01337]

I've seen the Headwind extension solve this by exposing attributes that store Regex patterns, you're also given the default values to modify of your own free will. My thoughts are adding a new attribute to .prettierrc that takes a Regex as Headwind does, then storing the default pattern in the docs.

[benface]

See #10676 (comment)

[jussivirtanen]

I stumbled upon this same challenge today while proposing the plugin for our project. We define most of our classes in variables, and the sorting doesn't seem to work with them. Here's an example:

// Before Prettier
const testStyles = 'bg-gray-400 w-full'
const testStylesNested = {
  base: 'bg-gray-400 w-full',
  sm: 'bg-gray-400 w-1/2',
}
const MyComponent = () => <div className="bg-gray-400 w-full"></div>

// After Prettier
const testStyles = 'bg-gray-400 w-full' // ❌ No change
const testStylesNested = {
  base: 'bg-gray-400 w-full',
  sm: 'bg-gray-400 w-1/2',
} // ❌ No change
const MyComponent = () => <div className="w-full bg-gray-400"></div> // ✅ Works

Would it be possible to help the Prettier plugin find Tailwind classes, similar to what we can do with the tailwindCSS.classAttributes in Tailwind Intellisense plugin? Or is that somehow possible already? Something like this:

"tailwindCSS.classAttributes": [
  "class",
  "className",
  "ngClass",
  ".*Styles*", // This is my custom selector for the Intellisense plugin
],

[cyrus01337]

Globs (which Tailwind intellisense uses) would definitely be better for DX over Regex (which Headwind uses). The only unfortunate part is that I've seen Headwind work for raw strings in some cases, unless I am misremembering.

[benface]

See #10676 (comment)

[benface]

This is possible. See https://www.npmjs.com/package/prettier-plugin-tailwindcss#user-content-sorting-non-standard-attributes