prettier-plugin-tailwind-classes-sorter

Sort tailwind classes

Usage no npm install needed!

<script type="module">
  import prettierPluginTailwindClassesSorter from 'https://cdn.skypack.dev/prettier-plugin-tailwind-classes-sorter';
</script>

README

DEPRICATED. This package was moved to prettier-plugin-tailwind

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.