Prettier Plugin Tailwind

Sort tailwind classes with Prettier.

Supports

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 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.

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

twConfig - Path to tailwind config relative to the root of the project.
twPluginsOrder - Comma separated order of tailwind plugins to sort classes by.
twClassesPosition - Position of component and utility classes.
twUnknownClassesPosition - Position of unknown classes.
twJsxClassAttributes - Comma separated list of JSX attributes to sort tailwind classes in.
twSortFunctions - Comma separated list of function names to sort classes in arguments.

More details can be found in OPTIONS.md

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!