Optimize your workflow with Tailwind CSS: Get class completions and hover previews for classes assigned to variables in VScode

#tailwindcss #vscode #dx #javascript

TL;DR

This article provides instructions on how to enable auto-completion and hover IntelliSense for TailwindCSS classes in VScode. To do this, users must add a regex to the VScode settings that matches the desired custom HTML attributes (variable names).

If you've been developing apps using TailwindCSS for some time, then it is inevitable that you will or must have already encountered this issue in VScode.

The problem 🚧

When you assign className to a div then you get auto-completion and the applied CSS style when you hover over the added tailwind class.

⚡️ Note: Tailwind CSS IntelliSense VScode extension must be installed in your VScode to get auto-completion and hover IntelliSense.

But if you create a variable called containerClass and then try assigning tailwind classes to it, then you won't get the same IntelliSense, which is fine for most people 🤝, but if you're a productivity fanatic like me, then this is not acceptable!

First, let's try to understand why doesn't the containerClass gets the same inference.

The why ❓

The Tailwind CSS IntelliSense VScode extension, by default only looks for class, className and ngClass HTML attributes to provide class completions, hover previews, linting, etc.

We can check this by searching for tailwindcss in our VScode settings, and the first result shows us the default HTML attributes for which class completions, hover previews, linting, etc are provided.

Hence we do not get class completions and hover previews when we assign tailwind classes to a variable.

The solution 💰

By now you've probably already understood what needs to be done to mitigate this.

In settings, after searching for tailwindcss, we need to:

Click on Add Item button
Add regex that matches the desired custom HTML attributes (variable names) - .*Class , .*ClassName .

Done! ✅

Now you should be able to get class completions and hover previews when you assign tailwind classes to a variable that ends with Class or ClassName .

Epilogue 🌻

For most people, this might not be of the utmost importance, but I am always on the lookout for the tiniest improvements in my Development Experience! Feel free to share any suggestions you might have for me 😇.

Originally, my plan was to compose a Twitter thread about this topic. However, upon further consideration, I discovered that tweets are not very searchable. As a result, I decided to write a more in-depth blog post instead.

If you like quick tips like this then you might also like my other blog posts. I also share a lot of React, Javascript, Typescript, expo, nextjs content on my twitter.

Thank you for taking the time to read this blog! Your support is greatly appreciated.