Multiline breakpoint sorting small to large

[Collexi-Dev]

It seems like you are sorting multiline breakpoints from none (mobile) -> large -> small, i.e.:

z-1 flex flex-col gap-4
lg:col-span-5 lg:col-start-3 lg:row-span-2 lg:row-start-2
md:col-span-6 md:col-start-2 md:row-span-2 md:row-start-2

While you are more likely to change your styles mobile first and scale up, meaning mobile -> small -> large it would make sense to sort them this way as well, is it possible to make this an opt-in rule?

[Collexi-Dev]

Update: I just noticed the official sorting does go from small to large, since improved only mentions "Same as official but also sorts by data-attributes" I didn't try it at first

[schoero]

I like that suggestion.

Update: I just noticed the official sorting does go from small to large, since improved only mentions "Same as official but also sorts by data-attributes" I didn't try it at first

I have noticed that the official order does not treat variants/modifiers differently than the normal classes. So they sometimes got mixed up in the order.

Example (not necessarily correct)

<img class="
  flex bg-red-500
  md:bg-blue-500
  border
" />

I wanted to always have variants/modifiers at the end, so thats why I added the improved order.

<img class="
  flex bg-red-500 border
  md:bg-blue-500
" />

There are a lot of discussions around sorting tailwind classes recently:

• Can we talk about the class sort order? [Prettier Plugin] tailwindlabs/tailwindcss#12821
• https://robinmalfait.com/blog/natural-sorting-of-strings-containing-numbers

I think there should be more nuanced ways to sort tailwind classes that the current options don't provide, so I will definitely look into this in the future.