Tailwind CSS automatic class sorting with Prettier & SvelteKit

Tailwind CSS has an official Prettier plugin for automatic class sorting. It scans the code for the utility classes and sorts them according to the recommended order.

Example

<!-- Before -->
<article
  class="hover:shadow-lg dark:border overflow-hidden rounded-lg"
>
...
</article>

<!-- After -->
<article
  class="overflow-hidden rounded-lg hover:shadow-lg dark:border"
>
...
</article>

To get started

npm install -D prettier prettier-plugin-svelte 
prettier-plugin-tailwindcss

Create a .prettierrc file in the root folder of your project. Add the following line and ensure that 'prettier-plugin-tailwindcss' is always the last value in the array.

{
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}