Tailwind classes are out of order

[davestewart]

Hey!

It seems that Tailwind classes generated in the app are different from the "recommended" order that plugins like prettier and Tailwind Playground use.

App:

<div class="w-96 h-80 bg-white justify-center items-center inline-flex ">
  <div class="w-44 h-40 p-2.5 border border-black justify-start items-end gap-2.5 flex flex-wrap">
    <div class="w-10 h-10 bg-cyan-100"></div>
    <div class="w-10 h-10 bg-blue-200"></div>
    <div class="w-10 h-10 bg-lime-400"></div>
    <div class="w-10 h-10 bg-teal-500"></div>
  </div>
</div>

Playground:

<div class="inline-flex h-80 w-96 items-center justify-center bg-white">
  <div class="flex h-40 w-44 flex-wrap items-end justify-start gap-2.5 border border-black p-2.5">
    <div class="h-10 w-10 bg-cyan-100"></div>
    <div class="h-10 w-10 bg-blue-200"></div>
    <div class="h-10 w-10 bg-lime-400"></div>
    <div class="h-10 w-10 bg-teal-500"></div>
  </div>
</div>

I researched how this could be done, but it appears that the official Prettier plugin can only be used with Prettier.

However, it appears that a few other folks have tried to do this but the best starting point might be the VSCode plugin Headwind which has a list of classes that could be leveraged for any sort function.

Obviously the new Figma variables functionality would mean that some extra work would need to be done to sort variables, but that shouldn't be too hard.

I'm happy to PR this after the work I'm doing on Flexbox.

[bernaferrari]

When this plugin was created there was no official order. Feel free to contribute, even if you can't get it 100% right, 80% right is better than right now.

[bernaferrari]

BTW, if you want, could you take a look if this is possible later? #103 Sounds like a fun and easy problem.