prettier-plugin-tailwindcss
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
A Prettier plugin that automatically sorts your Tailwind CSS class names into a consistent order every time you format your code, no manual effort required.
This is a plugin for Prettier, a code formatting tool, that automatically sorts Tailwind CSS class names. Tailwind CSS is a system where you style web pages by adding short class names directly to HTML elements. When a file has many of these classes, they can appear in any order, making code harder to read. This plugin puts them in a consistent order every time you format your code.
Setup requires installing the plugin alongside Prettier and adding one line to your Prettier configuration file. After that, whenever you run the formatter, all your Tailwind classes are reordered automatically without any manual effort.
By default the plugin sorts classes found in standard HTML attributes and common framework equivalents. You can extend this to custom attribute names through a configuration option. You can also tell the plugin to sort classes inside function calls, which is useful if you use helper libraries that combine class names conditionally. Tagged template literals (a JavaScript string syntax) are also supported.
The plugin works with both Tailwind CSS v3 (which uses a JavaScript configuration file) and Tailwind CSS v4 (which uses a CSS file as the entry point). You point the plugin to your Tailwind config or stylesheet, and it uses that to understand your project's custom classes and theme settings when deciding sort order.
For developers who want the sorting logic outside of Prettier, the package also exports a public API that can sort class strings or class arrays directly in custom scripts.
Where it fits
- Add automatic Tailwind class sorting to any project that already uses Prettier as its code formatter.
- Sort Tailwind classes inside custom attribute names or helper function calls like clsx() and cn().
- Use the exported public API to sort Tailwind class strings programmatically in custom build scripts.