search

heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.38k stars 46 forks source link

Custom classes are not sorted (e.g. new spacings) #66

Open realfunkyusername opened 4 years ago

realfunkyusername commented 4 years ago

-

lamualfa commented 4 years ago

@heybourn

Thank's for this Helpful extension. But, i think this is not bug. Headwind places an unregistered class name in the end of the class.

See: https://github.com/heybourn/headwind/blob/6de7d18ec87b0764e3daec4482fa9f70aaff02f7/src/utils.ts#L47

Solution

I have a little solution. If there is free time I will try to make a Pull Request for the solution.

AlexisWalravens commented 4 years ago

I get that real custom classes are not sorted but it would be really cool if it could sort custom variants of: m-{spacing} / p-{spacing} / rounded / gap-{spacing} / text-{color} / text-{size} / text-{color} / bg-{color} / etc... based on the tailwind.config.js

I don't know if there are people that uses default Tailwind config other than people just making things for fun / prototype, but when you have to follow a design to the pixel you have to customize the config.

tyler36 commented 3 years ago

Any progress on this?

I agree with @AlexisWalravens. It feels inconsistent to have things like width or padding displayed at the end (or beginning).

           <div class="w-32 text-green-500 h-128">Lorem ipsum dolor sit amet.</div>
           <div class="w-32 h-16 text-green-500">Lorem ipsum dolor sit amet.</div>

It would be great if custom spacing (w-{spacing}, h-{spacing}, m-{spacing}, p-{spacing}, gap-{spacing}, text-{size}) & custom color (text-{color} , text-{color}, bg-{color}) could be sorted as default.

Even just a setting to treat all custom as defaults.

EG. prepend custom

           <div class="h-128 w-32 text-green-500">Lorem ipsum dolor sit amet.</div>
           <div class="w-32 h-16 text-green-500">Lorem ipsum dolor sit amet.</div>

EG. append custom

           <div class="w-32 text-green-500 h-128">Lorem ipsum dolor sit amet.</div>
           <div class="w-32 h-16 text-green-500">Lorem ipsum dolor sit amet.</div>

EG. merge custom: This would be my preferred setting.

           <div class="w-32 h-128 text-green-500">Lorem ipsum dolor sit amet.</div>
           <div class="w-32 h-16 text-green-500">Lorem ipsum dolor sit amet.</div>