DEV Community

kay-adamof
kay-adamof

Posted on

How to assign TailwindCSS class names to arbitrary variable names while letting auto-completion work.

When defining class names in TailwindCSS, if you're using VSCode, installing the extension enables automatic autocompletion.

image.png

Autocompletion also works for variable names like const className = "".

image.png

By default, the variable names where autocompletion is active are:

  • "class",
  • "className",
  • "ngClass".

So, what about using variable names like const mySpecialStyles = ""? Of course, autocompletion doesn't work by default.

image.png

Is there a way to enable autocompletion for arbitrary variable names like mySpecialStyles or greatStyles? I looked into it, and I found a configuration method that I want to share, which was originally introduced in a GitHub Discussions post. For detailed information, please refer to the original discussion.

VSCode Configuration

Configuring VSCode is simple. Refer to the following image: go to the Class Attributes section in settings and add .*Styles* using the Add item button.

image.png

If you want to add this to your settings.json, here's what you need to do:

image.png

With this, autocompletion will now be enabled for variable names like mySpecialStyles or greatStyles 🎉

image.png


While it's generally recommended to define classes inline with TailwindCSS, for those who prefer separation to maintain cleaner code and avoid duplication, give this a try! It can help make your code more readable and organized.

Top comments (1)

Collapse
 
lajouizakariae profile image
Zakariae Lajoui

Very Thankfull