Tailwind Automatic Class Sorting with Prettier

Published on

When I started working with TailwindCSS (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.

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 together with the official page Automatic Class Sorting with Prettier .

The article shows the names of Jonathan Reinink and Adam Wathan, so thank you peeps!

More Snippets

Unknown at rule @apply... k thx bye!

Are we finally done seeing all those "Unknown at rule @apply"?! Because I surely am!

declare-ai.org - ... so, who wrote that?!

Let everyone know how AI helped you... or didn't!