Prettier Plugin Tailwind Classes Sorter

Sort tailwind classes in HTML with Prettier.

Go from this:

<div class="z-50 z-10 container  text-left md:text-center justify-center">
  ...
</div>

To this:

<div class="container justify-center text-left z-10 z-50 md:text-center">
  ...
</div>

This plugin reads your tailwind.config.js file to support new keys and classes generated by Tailwind.

Installation VSCode:

Install Prettier into your project locally:

yarn add --dev prettier

Install this plugin:

yarn add --dev prettier-plugin-tailwind-classes-sorter

Roadmap

• Add support for configuring plugin order
• Add support for JSX, TSX, Vue

Contributing

Testing

Rename test-tailwind.config.js to tailwind.config.js and run node ./test.js.