ERB classes don't show tailwind css autocompletion in form helpers

[ishanray]

<%= form.select :select_field, options, {}, 
        class: 'w-full mt-1 rounded-lg border  text-zinc-700' %>

When using tailwindcss in rails, the erb templates don't show any autocompletion when they are using rails form helpers.

[bradlc]

Hey @ishanray. By default the extension only provides completions for syntax that looks like a HTML attribute (e.g. class="", className={}, [ngClass]="" etc.), and this is unlikely to change.

You can however use the tailwindCSS.experimental.classRegex setting to enable completions in custom locations. For the example you gave you could use a configuration like this:

"tailwindCSS.experimental.classRegex": [
  "\\bclass:\\s*'([^']*)'"
]

I hope that helps!

[swanson]

This was helpful, however I needed an additional regex to work with double quotes:

"tailwindCSS.experimental.classRegex": [
    "\\bclass:\\s*'([^']*)'",
    "\\bclass:\\s*\"([^\"]*)\""
 ],

[katekostina]

I added this to my config file but it doesn't work in RubyMine.
What could be a problem? Could you please take a look? @bradlc

[rafaeldalago]

Or simply this to consider both single and double quotes:

"tailwindCSS.experimental.classRegex": [
    "\\bclass:\\s*['\"]([^'\"]*)['\"]"
  ]

[loomchild]

Thanks a lot for sharing, it works.

For anyone using NeoVim with nvim-lspconfig:

lspconfig.tailwindcss.setup{
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = { [[\bclass:\s*'([^']*)']], [[\bclass:\s*\"([^"]*)"]] }
      }
    }
  }
}

[Samuelodan]

Same here @katekostina . It doesn't work for me in RubyMine.

[Samuelodan]

Update! I found a fix for RubyMine @katekostina and anyone else interested.
All it took was installing Tailwind within the project via npm install -D tailwindcss according to the RubyMine Tailwindcss docs.

It also enabled the feature that lets you see the resulting CSS on hover.
I should mention, though, that VS Code didn't require this additional install. It just worked.