Regression between NPM releases 0.0.16 and 0.0.17 — Not working in Neovim

[nikfp]

What version of VS Code are you using?

Neovim 0.11 with the language server installed through Mason

What version of Tailwind CSS IntelliSense are you using?

Tested with v0.0.16 through 0.0.18

What version of Tailwind CSS are you using?

Multiple for different projects

What package manager are you using?

npm and pnpm

What operating system are you using?

linux and macos

Tailwind config

Multiple configs

VS Code settings

N/A

Reproduction URL

Due to this being a combination of various tools, an MRP is not feasable

Describe your issue

The core expectation of intellisense and so on has continued to work correctly for all default languages I've tried, up through v0.0.18. However I have an extension point in my Neovim config that allowed use in Elixir files including Heex templates, and also has a classRegex setting to detect some special syntax that heex allows in classes.

I noticed recently that this was broken, and the only fix has been downgrading the LSP server to 0.0.16. The docs also no longer show the classRegex experimental setting, but since the README is a symlink it's not showing versions I can walk back on and see when that was taken out. I'm having trouble locating the regression.

Please advise on any other information you might need to pin this down. I'm glad to help where I can.

[thecrypticace]

Hey! Can you provide your settings that are passed to the language server?

Also, even if it's not a minimal reproduction, a reproduction of any kind would be massively helpful.

[sivasiva]

@thecrypticace, thanks for all the great work here.

Here's a minimal setup to reproduce the Phoenix + Nvim + Tailwind intellisense issue:
https://github.com/sivasiva/twinlazy is the neovim repo that uses LazyVim. The LSP config is here. Please clone repo as ~/.config/nvim
https://github.com/sivasiva/twin-phoenix is a brand new Phoenix app. You can clone any where on disk.

Once the repos are cloned, you can open the Phoenix project in neovim
HTML: When you try to add a tailwind utility here: https://github.com/sivasiva/twin-phoenix/blob/main/test.html#L11, the autocompletion does not work
HEEX: When you try to add a tailwind utility here: https://github.com/sivasiva/twin-phoenix/blob/main/lib/twinvim_web/components/layouts/app.html.heex#L2, autocompletion does not work
Elixir with ~H Sigils: When you try to add a tailwind utility here: https://github.com/sivasiva/twin-phoenix/blob/main/lib/twinvim_web/components/blocks.ex#L7, autocompletion does not work

Ideally, in a Phoenix 1.7 app, we would want Tailwind autocompletion to be available in all 3 scenarios.
Additional points to note:

• the tailwind.config.js is not in the root of Phoenix apps, but inside the assets folder.
• you can tail -f ~/.local/state/nvim/lsp.log to watch client/server communication from Nvim to the lang server

HTH.

[thecrypticace]

@sivasiva Thanks! This is helpful!

So something here isn't working in Neovim specifically but I'm not 100% sure why — that Phoenix project definitely works in VSCode (as long as the includeLanguages setting is set up).

In a fresh Neovim install with the above config:

• I do get completions in test.html
• I do not get completions in either of the .html.heex or .ex files.

The LSP log is unfortunately not very helpful — I don't actually see any communication logs and there's a lot of noise entirely unrelated to the Tailwind LSP. I'll have to set up a custom build of our LSP with message logging I think — should be easy enough.

[nikfp]

@sivasiva thanks for the MRP, I just got back to work after a long weekend and saw you put this together.

@thecrypticace I saw your rename of the issue and agree it's better. Thanks for that. I'm able to downgrade the server version as noted and get back everything that wasn't working, but I don't know enough about the LSP interface to diff the versions and see what changed between 0.0.16 and 0.0.17 and actually understand what I'm looking at. So my apologies on being behind the curve on that. Glad to help where I can though, which maybe is starting with a clone of the repo and just browsing the diff to see what's what.

EDIT: If anyone who knows the project can point to the places that might have value, I'm decent at TS and glad to start digging.

[thecrypticace]

Just did a test in Zed which uses our language server and it appears to work as well (it did however require a different includeLanguages setting and I had to opt-in to Tailwind's server for .ex files).

@sivasiva I noticed in your LSP setup that it's using the userLanguages initialization option. If you change this to use settings tailwindCSS.includeLanguages instead does it start working?

settings = {
  tailwindCSS = {
    includeLanguages = {
      elixir = "html-eex",
      eelixir = "html-eex",
      heex = "html-eex",
    },

    experimental = {
      classRegex = {
        'class[:]\\s*"([^"]*)"',
      },
    },
  },
},

[thecrypticace]

@nikfp No worries — I'm hoping I can figure out what's wrong well enough with that reproduction. As for the differences — there's a lot so peering through them might be complicated :D

[nikfp]

@nikfp No worries — I'm hoping I can figure out what's wrong well enough with that reproduction. As for the differences — there's a lot so peering through them might be complicated :D

I'm noticing that, just went down a very complicated rabbit hole.

@sivasiva I noticed in your LSP setup that it's using the userLanguages initialization option. If you change this to use settings tailwindCSS.includeLanguages instead does it start working?

settings = {
  tailwindCSS = {
    includeLanguages = {
      elixir = "html-eex",
      eelixir = "html-eex",
      heex = "html-eex",
    },

    experimental = {
      classRegex = {
        'class[:]\\s*"([^"]*)"',
      },
    },
  },
},

I'm in a position to test this now, hopefully back with results shortly

[nikfp]

@sivasiva I noticed in your LSP setup that it's using the userLanguages initialization option. If you change this to use settings tailwindCSS.includeLanguages instead does it start working?

settings = {
  tailwindCSS = {
    includeLanguages = {
      elixir = "html-eex",
      eelixir = "html-eex",
      heex = "html-eex",
    },

    experimental = {
      classRegex = {
        'class[:]\\s*"([^"]*)"',
      },
    },
  },
},

@thecrypticace That did it, now up to 0.0.20 with full intellisense as expected. Thanks for finding that for us, anything I / We can do to help document this?

[thecrypticace]

Okay interesting! It's supposed to fallback to the initialization option if it can't find them. Might need to tweak that check 🤔

[thecrypticace]

I have a potential fix — I'll finish it up in the morning and hopefully if things are working I'll tag another release.

[nikfp]

That's amazing, thanks for jumping on this!

[sivasiva]

@thecrypticace, @nikfp thanks a ton!

the recommended tailwindCSS.includeLanguages works like a charm on a fresh nvim install. Can confirm HTML, HEEX and Elixir all look good. Looks like LazyVim extras.tailwind needs to be adapted a bit.

thanks again for the quick turnaround.

[bus710]

Came here to look for others with the same issue, and yes I see you guys!
I followed the same as suggested in the LSP config for my Astronvim v4 setup.
Everything works fine as expected - html, svelte, ex, and heex.

Thank you!

return {
  "AstroNvim/astrolsp",
  ---@type AstroLSPOpts
  opts = {
    ...
    config = {
      ...
      tailwindcss = {
        cmd = { "tailwindcss-language-server", "--stdio" },
        root_dir = lspconfig.util.root_pattern(
          "mix.exs",
          "tailwind.config.js",
          "tailwind.config.ts",
          "postcss.config.js",
          "postcss.config.ts",
          "package.json",
          "node_modules",
          ".git"
        ),
        filetypes = { "html", "elixir", "eelixir", "heex", "ex", "svelte" },
        settings = {
          tailwindCSS = {
            includeLanguages = {
              elixir = "html-eex",
              eelixir = "html-eex",
              heex = "html-eex",
            },
            experimental = {
              classRegex = {
                'class[:]\\s*"([^"]*)"',
              },
            },
          },
        },
      },
      ...

[sivasiva]

here's a minimal working neovim config for anyone looking for Elixir/Phoenix 1.7 + Tailwind LSP setup (based on kickstart.nvim: https://gist.github.com/sivasiva/7be2ece5e04e0af0ebc26f5a4cbcc9d8

[taksuyu]

Looks like it's working perfectly for me on 0.0.20 without even the experimental classRegex

[nikfp]

Looks like it's working perfectly for me on 0.0.20 without even the experimental classRegex

Likewise

[thecrypticace]

I've merged in a fix for this to ensure language mappings specified during initialization still work. If you can test the insiders build of the language server that would be awesome — I was having trouble getting things to work properly with the nevoim setup and after turning on some Logging — none of the settings I was setting were being respected and passed to the server so I'm not sure what I'm doing wrong there.

npm install @tailwindcss/language-server@insiders

[sivasiva]

thanks @thecrypticace, tested the insiders version, not sure what the config needs to look like

the autocomplete only works with tailwindCSS.includedLanguages.
whether init_options.userLanguages is present or not, does not seem to matter

[jackielii]

hi, I submitted a PR that moved to tailwindCSS.includedLanguages: neovim/nvim-lspconfig#3231

[thecrypticace]

@sivasiva This is a bit odd given that NPM says the publish worked and the tests also show this should work fine — I went ahead and released v0.0.21. Hopefully that'll get picked up soon.