Tailwind CSS autocomplete in VSCode with Ruby on Rails

How to configure IntelliSense to add autocompletion to your .html.erb files within VSCode in 3 easy steps?

TL;DR there are just a few lines to change in your VSCode settings.json file.

Step 1: Open your settings.json file

• Press F1 while in VSCode to open the command panel
• Enter “open settings” and select the one with (JSON) as shown on the picture below.

Step 2: Make sure you have the following

If missing add the following blocks in the settings.json file. Make sure to associate erb to html.

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "html",
    "erb": "html"
 },
...
"tailwindCSS.emmetCompletions": true,
...
"files.associations": {
    "*.html.erb": "erb"
},
...
"emmet.includeLanguages": {
    "*.html.erb": "html",
    "erb": "html"
},
},

Step 3: Test and Tada!