Photo by Kelly Sikkema on Unsplash

Must Haves While Working With TailwindCSS — Clean Code Practices

A step towards cleaner and more maintainable code.

TLDR;

1. Inline Fold or Tailwind Fold VSCode Extensions
2. Auto-order TailwindCSS Classes
3. Tailwind CSS IntelliSense VSCode Extension

Inline Fold VSCode Extention

Writing TailwindCSS classes can be easy but understanding them in a huge codebase can be a heavy “cognitive” task. It makes the HTML code hard to read.

One of the VSCode extension that comes to rescue is Inline Fold. You can click on the three-dot icon to view the CSS Tailwind classes. It can take sometime to get a hang of it but it makes the “prediction” of HTML code pretty efficient. An example of the VSCode extension does is shown below:

Without Inline Fold VSCode Extention

With Inline VSCode Extention

There is a VSCode extension that basically does the same and more: Tailwind Fold

Auto-Order TailwindCSS…