There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind

I have seen various conventions over the years on how to order css properties that could be used for ordering tailwind style classes. E.g https://rhodesmill.org/brandon/2011/concentric-css/

The problem is more, that to my knowledge, none of them got wide adaption. You could at adapt them on at least a company/team wide level, but don’t know what tooling there is to make it easily configurable.

This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.

That was what I did with CSS properties, but it doesn’t fit as well with Tailwind.

I agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.

I like it. Simple and predictable.

Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn...

Otherwise, I usually try to separate out states when using @apply.

` .example { @apply bg-blue-100; @apply hover:bg-blue-200; @apply focus:bg-blue-200; `

But now with JIT you could simplify if you wanted to:

`.example { @apply bg-blue-100; @apply hover:focus:bg-blue-200;`

Maybe you could use data-attribute to group these common styles like 'sizing' 'color' etc

something like <div data-css-size='large flex-box display-flex' data-css-color="red" data-css-font="gotham serif"></div>

then something like [data-css-color*="red"] {color:red;}

I haven't tested this just thinking off the top what might work

I like this a lot actually, considering JIT maybe data attributes or some tighter integration into react could easily be done so there isn’t so much reliance on class names.

https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.

The convention I have started using is “outside in” meaning first the margin, then the border, then the padding, etc. It’s not perfect because a lot of stuff is “in” (font family, text color, etc.) but it at least gives a rough directionality to things.

I’m ok with a convention but considering how that could become it’s own complete config maybe alphabetical would just be better. Also it typically has less issues with git changes.