Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
⚠️ WARNING: this package is no longer maintained. ⚠️
Please use the official prettier-plugin-tailwindcss package instead.

It was a pleasure developing this package and I hope it served you all well (:

npm version

Prettier Plugin Tailwind

Sort tailwind classes with Prettier.


  • HTML
  • CSS (@apply directive)
  • ReactJS (JSX, TSX)
  • VueJS
  • twin.macro

Go from this:

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

To this:

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

This plugin reads your tailwind.config.js to sort tailwind classes in your project.

Installation VSCode

Install Prettier and the plugin into your project locally:

yarn add --dev prettier prettier-plugin-tailwind

Other IDE's are supported.

Note: Prettier 2.0.0 or greater is required as a peer dependency.

Prettier Options

These options can be set in your .prettierrc file to change the behavious of this plugin.

More details can be found in

Contributing 🙌

Contributions are more than welcome. If you see any changes fit, go ahead and open an issue or PR.

Any support is a huge motivation, thank you very much!

Buy Me A Coffee