Workaround with tailwindcss lsp

[villekivela]

Is there a known way to make the syntax highlighting work so that the tailwind autocomplete would work also in template files?

[dlvandenberg]

Isn't autocompletion part of a LSP?

[Ask-786]

This is what i do for all the LSPs to get attached correctly. I don't know if it's a right method or not. But it works.

vim.api.nvim_create_autocmd({ 'BufRead', 'BufEnter' }, {
    group = vim.api.nvim_create_augroup('set-angular-filetype', { clear = true }),
    pattern = '*.component.html',
    callback = function()
        -- Necessary for lsps to get attached.
        vim.cmd([[set filetype=html]])
        vim.cmd([[set filetype=angular.html]])
    end,
})

[villekivela]

autocmd BufRead,BufEnter *.component.html set filetype=angular in ftdetect/angular.vim works also to get the highlighting. But I don't get the tailwind autocomplete with either method.

Same clients are attached.

[JoschuaSchneider]

I'm facing similar problems. With the fix mentioned by @Ask-786 I'm getting the wrong hover results when trying to hover tailwind classnames.

Could you share the full example of your setup with tailwind?

[Ask-786]

Hi @JoschuaSchneider,

That's all I do regarding file type setup. It's still buggy, though. You have to open any TypeScript file before going into a template for the Tailwind LSP to work correctly.

If you need more details, You can check out my nvim config repo here: nvim.

[JoschuaSchneider]

Thanks for the quick response @Ask-786 !

My problem was that I still had the setup steps from the docs present. I replaced it with your autocmd snipped and now both is working for me.

Thank you!

For anyone wondering, here is my full plugin code for this module using your fix:

return {
  {
    'dlvandenberg/tree-sitter-angular',
    dependencies = {
      'nvim-treesitter/nvim-treesitter',
    },
    config = function()
      vim.api.nvim_create_autocmd({ 'BufRead', 'BufEnter' }, {
        group = vim.api.nvim_create_augroup('set-angular-filetype', { clear = true }),
        pattern = '*.component.html',
        callback = function()
          -- Necessary for angular lsp to get attached.
          vim.cmd [[set filetype=html]]
          vim.cmd [[set filetype=angular.html]]
        end,
      })
    end,
  },
}

[Ask-786]

I think you don't need to explicitly install tree-sitter-angular @JoschuaSchneider .

It just get installed automatically when you enter a template file.

Sorry for the "Quick" reply by the way. was out of office for last few days.

[dlvandenberg]

In the nightly neovim build, filetype detection is added for Angular Templates. Filetype is htmlangular. Please adjust your LSP config accordingly.

You need to update to the latest nvim-treesitter version also, as the angular parser is coupled to the new filetype.

[Ask-786]

I've created a pull request to nvim-lspconfig, and it got merged today. You can check it out here: https://github.com/neovim/nvim-lspconfig/pull/3240#event-13568102368. With this update, there's no need for any extra configurations for LSPs (emmet_language_server, emmet_ls, angularls and tailwindcss).

And if you are formatting with none-ls and prettier or prettierd, I have updated it there too.

note: as mentioned by @dlvandenberg, you need the nightly neovim build for this.