DEV Community

Discussion on: Increase tailwind classes readability with this eslint plugin

Collapse
 
kalimahapps profile image
Kalimah Apps

I guess it comes down to personal choice. Working with a utility-first framework means that you will write many classes (either horizontally or vertically). For me, I prefer the latter. It is a trade-off I am willing to accept given the benefit I get (classes being more readable).

I developed these ESLint rules out of frustration in one of my projects because I had to scroll back and forth to remember what classes I have added to debug a problem.

If you are using VSCode you can check out this extension:
marketplace.visualstudio.com/items...

It helps hiding the classes while reading the file which greatly improve readability of the code overall but not tailwind classes. The other downside is that you need to use VSCode for it work. If you want to review a git log then it will not be as easy to read.