No Completion Suggestions Received for ERB file

[rcmoret]

What version of VS Code are you using?

n/a using NeoVim v0.10.0

What version of Tailwind CSS IntelliSense are you using?

v0.0.18

What version of Tailwind CSS are you using?

v3.3.3

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

// See the Tailwind default theme values here:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
// const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config */
module.exports = {
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('flowbite/plugin'),
        plugin(function({ addUtilities }) {
            addUtilities({
                '.no-scrollbar': {
                    '-ms-overflow-style': 'none',
                    'scrollbar-width': 'none',
                    '&::-webkit-scrollbar': {
                        display: 'none'
                    }
                },
                '.default-scrollbar': {
                    '-ms-overflow-style': 'auto',
                    'scrollbar-width': 'auto',
                    '&::-webkit-scrollbar': {
                        display: 'block'
                    }
                }
            }, ['responsive'])
        })
    ],

    content: [
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/views/**/*.{erb,haml,html,slim}',
        './app/components/**/*.{erb,haml,html,slim,rb}',
        './node_modules/flowbite/**/*.js',
    ],

    // All the default values will be compiled unless they are overridden below
    theme: {
        // Extend (add to) the default theme in the `extend` key
        extend: {
            // used to make radio buttons into checkboxes, see accredited_information/show.html.erb to see why...
            backgroundImage: {
                'checkmark':  "url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 -5 16 22'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E)"
            },
            backgroundSize: {
                'checkmark': '1em 1em'
            },
            backgroundRepeat: {
                'checkmark': 'no-repeat'
            },
            backgroundPosition: {
                'checkmark': 'center'
            },
            backgroundColor: {
                'checkmark': 'rgb(44 122 122)'
            },
            // Create your own at: https://javisperez.github.io/tailwindcolorshades
            padding: {
                '1/2': '50%',
                full: '100%',
            },
        },
    },
    // Opt-in to TailwindCSS future changes
    future: {},
}

VS Code settings

Reproduction URL https://github.com/rcmoret/tailwind-example

Describe your issue

Here's the situation...if I have an erb template (eg app/views/dashboard/sample.html for example), I get suggestions. So, I know I'm on the right track, but if I look at an erb file (eg app/views/dashboard/sample.html.erb or app/components/card_component.html.erb I get nothing. I updated the lsp log level and edited an html file and an erb file, and here's what I saw...both are making requests to the tailwind lsp client but only the html is receiving 'results'.

Shortened / slightly edited version of the logs

"LSP[tailwindcss]"
  "client.request"1"textDocument/completion"
  {  context = {    triggerCharacter = " ",    triggerKind = 2  }, 
     position = {    character = 59,    line = 0  },  textDocument = {    uri = "file:sample.html"  }}<function 1>1
"rpc.send"
  {  id = 4,  jsonrpc = "2.0",  method = "textDocument/completion",  params = {    context = {    triggerCharacter = " ",      triggerKind = 2    },
  position = {      character = 59,      line = 0    },    textDocument = {      uri = "file:///Users/path_to_repo/sample.html"    }  }}
"rpc.receive"
  {  id = 4, jsonrpc = "2.0",  result = {    lots of stuff in here }
"rpc.receive"
  {  jsonrpc = "2.0",  method = "textDocument/publishDiagnostics",  params = {    diagnostics = {},    uri = "file:///Users/path_to_repo/sample.html"  }}

"LSP[tailwindcss]"
  "client.request"1"textDocument/completion"
  {  context = {    triggerCharacter = " ",    triggerKind = 2  },  position = {    character = 19,    line = 8  },  textDocument = {    uri = "file:///tab_component.html.erb"  }}<function 1>20
"rpc.send"
  {  id = 7,  jsonrpc = "2.0",  method = "textDocument/completion", 
  params = { context = {      triggerCharacter = " ",      triggerKind = 2    },    ... }
# I feel like this one should have data
"rpc.receive"
  {  id = 7,  jsonrpc = "2.0"}
"rpc.receive"
  {  jsonrpc = "2.0",  method = "textDocument/publishDiagnostics",  params = {    diagnostics = {},    uri = "file:///tab_component.html.erb"  }}

Link to the full log transcript: lsp.log

[thecrypticace]

Providing a full LSP log is 🐐 thank you!

This is because the language ID of the document being sent by the LSP is eruby. We handle erb by default but not eruby. You can customize the tailwindCSS.includeLanguages setting which will map a language ID that we're told a document is to a specific language we support.

For example, in VSCode's settings I would do something like this:

{
  "tailwindCSS.includeLanguages": {
    "eruby": "erb"
  }
}

I'm not sure how you set settings in Neovim's LSP support but it is listed in your screenshot so I assume it's editable. That should take care of it and completions should start working.

[rcmoret]

Thanks. I'll take care of that tomorrow!