@glideapps/prettier-plugin-glide-tailwind

Prettier Plugin Tailwind

Sort tailwind classes with Prettier.

Supports

• 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">...</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:

npm install --save-dev @glideapps/prettier-plugin-glide-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.

• 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