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
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
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).