Prettier Plugin Tailwind
- CSS (@apply directive)
- ReactJS (JSX, TSX)
Go from this:
<div class="z-50 z-10 container text-left md:text-center justify-center"> ... </div>
<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.
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!