Add tailwind class sorting

[dsherret]

There should be an option to sort class names similar to the prettier plugin.

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

Probably "jsx.sortClassNames": "tailwind" or something.

[MrFoxPro]

Maybe it could be done via Eslint? I'm using unocss eslint rule to sort it.

[harrysolovay]

Pinging this issue in light of Fresh 1.6, a headline of which is "First class Tailwind CSS plugin."

[harrysolovay]

Some questions regarding the optimal solution:

Should it trim leading/trailing/in-between whitespace? For instance...

- <div className=" h-2" />
+ <div className="h-2" />

- <div className="h-2 " />
+ <div className="h-2" />

- <div className="h-2  w-2" />
+ <div className="h-2 w-2" />

Should it remove surrounding curlies?

- <div className={"h-2"} />
+ <div className="h-2" />

How would we want to tackled non-className-placed tw strings? For instance, using a cn merge utility is a common pattern.

function MyComponent({ className }: { className: string }) {
  return <div className={cn("h-2", className)} />
}

[harrysolovay]

Seems the sort order may depend on the tailwind config. This is likely out of scope for the TypeScript plugin. May require a dedicated dprint-plugin-tailwindcss.

[cjpearson]

Instead of a dedicated plugin, would a shared crate that other plugins depend on work? Or a plugin that other plugins depend on? I'm thinking that way tailwind classes can be formatted consistently across ts,jsx,html,vue,svelte etc.