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

#tailwindcss #vscode

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

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

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.

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.

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

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

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.