DEV Community

Scott Watermasysk
Scott Watermasysk

Posted on • Originally published at on

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"

Enter fullscreen mode Exit fullscreen mode

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"

Enter fullscreen mode Exit fullscreen mode

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).

Discussion (3)

danieldocki profile image
Daniel Docki

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

<%= button_tag "Hello", class: "<<<HERE>>>" %>
pavelloz profile image
Paweł Kowalski

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

scottw profile image
Scott Watermasysk Author

But then you lose ERB specific highlighting/features.