Tailwind CSS for frontend teams: From settings to rules

1. clsx

   1 22 9,111 5.8 JavaScript

   A tiny (239B) utility for constructing `className` strings conditionally.

   

   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.

2. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

3. tailwind-merge

   2 16 5,335 9.2 TypeScript

   Merge Tailwind CSS classes without style conflicts

   

   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.

4. prettier-plugin-tailwindcss

   3 22 6,630 8.0 TypeScript

   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.

5. eslint-plugin-tailwindcss

   4 13 1,955 5.2 JavaScript

   ESLint plugin for Tailwind CSS usage

   

   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

Suggest a related project