Optimize your workflow with Tailwind CSS: Get class completions and hover previews for classes assigned to variables in VScode
Tags: tailwindcss, vscode, dx, javascript
Published: 2023-03-12 13:57:33

> 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](https://tailwindcss.com/) for some time, then it is inevitable that you will or must have already encountered this issue in VScode.

## The problem 🚧

![The problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shffivsotutoe5cc33zd.gif)

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](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 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.


![Search 'tailwindcss' in vscode settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iia7wahxh6xbakrxduir.png)

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:

1. Click on <mark>Add Item</mark> button
    
2. Add regex that matches the desired custom HTML attributes (variable names) - `.*Class` , `.*ClassName` .
    
![default setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2rbb1wa6kmytwrfrc51.png)
 
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` .


![Working Solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpurtrowozauvjz70xw4.gif)

## 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*](https://twitter.com/vikrantbhat1022/).

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