headwind icon indicating copy to clipboard operation
headwind copied to clipboard

support classnames

Open AdrienLemaire opened this issue 4 years ago • 2 comments

Is your feature request related to a problem? Please describe.

I'm using tailwindcss-classnames by @muhammadsammy in my typescript project to have typed classes. But unfortunately, I do not get auto-sorting of classname arguments.

Describe the solution you'd like Currently, we can get sorting with

return (
- <div className="bg-red-500 container mx-auto text-white" />
+ <div className="container mx-auto text-white bg-red-500" />
);

I'd like the following snippet to also get sorted the same way.

import {classnames as cn} from 'tailwindcss-classnames';

- const divCn = cn("bg-red-500", "container", "mx-auto", "text-white");
+ const divCn = cn("container", "mx-auto", "text-white", "bg-red-500");

return (
  <div className={divCn} />
);

Note that it should also work with multilines:

const divCn = cn(
-  "bg-red-500", 
  "container", 
  "mx-auto",
-  "text-white"
+  "text-white",
+  "bg-red-500", 
);

Describe alternatives you've considered Current, I'm using vim fu to sort alphabetically my classes, which is suboptimal. I'd really like to enjoy headwind's sort order.

AdrienLemaire avatar Sep 28 '20 08:09 AdrienLemaire

This isn't something I plan on adding support for at this stage but I'm always open to PR's 👍

heybourn avatar Oct 06 '20 11:10 heybourn

Was this fixed with #109? I noticed it was mentioned as getting resolved, but I cannot get the sorting to work with and sort of classname function still. Demo of sort working with normal className string, but not the function call:

headwind

tylersayshi avatar Jul 22 '21 03:07 tylersayshi