Tailwind class sorting in Twig files with Prettier

Updated February 2025

You can find a working example of these articles in my boilerplate Craft site repository.

Tailwind CSS has a plugin for Prettier that automatically sorts your Tailwind classes.

Prettier saves me a ton of time not having to manually format my Twig templates, and you can set it up to format automatically whenever you save the file. The Tailwind Prettier plugin and the Prettier Plugin for Twig used to be incompatible with each other, but thanks to Tailwind there's a workaround which lets these two work in tandem.

First, you'll want to follow the instructions in my Using Prettier with Twig in VS Code article to enable Prettier for Twig files. After that, follow the instructions on Tailwind's blog post to install the Tailwind class sorting plugin: Automatic Class Sorting with Prettier.

Once you've got both of them installed, add this to your .prettierrc.json file and you're good to go.