VSCode Tailwind Extension And Rails (ERB)

If you are having trouble getting an extension like VSCode Tailwind to work in VSCode, a smart place to start debugging is the language mode.

For example, for me, a file named application.html.erb had the language set to html.erb instead of the expected erb. This in turn, caused the VSCode Tailwind extension to be ignored since it was not registered for html.erb.

Long term, there may be a way to have this extension look for any erb (*.erb - although that too may be problematic). In the short run, we can tell VSCode to map any html.erb file back to erb like this:

"files.associations": {
    "*.html.erb": "erb"
  }

This change fixed my immediate issue, but it ended up causing another bug. Previously, I had done a similar fix for Emmet by mapping html.erb to html. Now of course since the file type was being changed to erb Emmet needed the following update:

 "emmet.includeLanguages": {
    "html.erb": "html",
    "erb": "html"
  }

The ease of configuration overrides is both a blessing and a curse. It is very easy to make one small change and have it run amuck. But it is much better than being boxed into something with no way making it work (even just temporarily).

Comments

[Daniel Docki]

there is some way to work in the rails helpers, example:

<%= button_tag "Hello", class: "<<<HERE>>>" %>

[Paweł Kowalski]

You could also change erb files to be treated as html. ;)

[Scott Watermasysk]

But then you lose ERB specific highlighting/features.