Tailwind Automatic Class Sorting with Prettier
When I started working with TailwindCSS (Opens in a new tab) (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their automatic class sorting plugin for Prettier (Opens in a new tab).
What you would have had before as
1<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
will become
1<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up onSave you'll have the classes' sorting right at your fingertips!
Hierarchy of the sorting
Classes in the base layer will be sorted first, followed by classes in the components layer, and then finally classes in the utilities layer.
From their documentation
The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.
To understand better how the sorting happens and if you need to keep something in mind, I recommend checking the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab) together with the official page Automatic Class Sorting with Prettier (Opens in a new tab).
The article shows the names of Jonathan Reinink (Opens in a new tab) and Adam Wathan (Opens in a new tab), so thank you peeps!
