-
To make class-based Tailwind easy to use, we used the clsx library to help manipulate class names. However, using clsx and Tailwind together often doesn't work as intended.
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
So the library I use is tailwind-merge, which is a class that eliminates conflicts between classes when using Tailwind. So I created the following utility function.
-
prettier-plugin-tailwindcss
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
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.
-
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