prettier-plugin-tailwindcss VS eslint-plugin-tailwindcss

You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!

For years, I've been prettier's biggest fan... Introducing it to every codebase at a new role, instantly adding it to any new repository, installing additional plugins such as tailwind or xml and of course, ensuring the "Format on save" option is switched on.

prettier-plugin-tailwindcss: A plugin for Prettier that sorts your Tailwind CSS classes. It organizes Tailwind utility classes in a specific order to maintain consistency across the project.

Thats it! Still have problems? Check out the official prettier-plugin-tailwindcss documentation.

For additional configuration options like sorting classes in non-standard attributes, visit the prettier-plugin-tailwindcss documentation.

To automatically sort TailwindCSS classes when using Prettier, you can follow this documentation.

Since this was a problem that many people had already encountered, there was already a solution. The first thing I found was Tailwind's official Prettier plugin, which ensures that class names are always ordered according to a certain rule. Best of all, it's auto-correcting, so I don't accidentally miss something or commit a different order.

It's not as if the correct order for the rules is mysterious. It's implemented in the Tailwind compiler. Tools like prettier-plugin-tailwindcss, which automatically sorts the class names in your HTML code to match the order in which Tailwind generates them in your CSS output, use a public API in Tailwind to get this order.

Other than that, you can get Prettier sorting your classes with the Tailwind Prettier plugin. And one more quality-of-life extension that might help your eye sores from a long list of classes is Tailwind Fold.

Tailwind

However, after a little more searching, we found this plugin, which is maintained by the community and has slightly more rules than the official plugin's class name ordering rules. Again, most of the rules support auto-correction. Here are the rules the team chose to use

eslint-plugin-tailwindcss - Rules enforcing best practices and consistency using Tailwind CSS.

I'm talking about this plugin: https://github.com/francoismassart/eslint-plugin-tailwindcss that helps with ordering your classnames correctly and adds a bunch of other useful checks.

For one, you can't take advantage of classnames order.

I'm already using: https://www.npmjs.com/package/eslint-plugin-tailwindcss. So, it also sort classnames in JSX Code

Ever heard of eslint-plugin-tailwindcss?

eslint-plugin-tailwindcss for ESLint