tailwind for lsp?

[steveeq1]

I am going through the tutorial about tailwind and I think it's great. I would like to use the "intellisense" feature of tailwind though, but I use emacs. Are there any plans to support tailwind in some sort of lsp server so people with other editors/ides can use it?

[polyzen]

• I have the server installed via npm install -g @tailwindcss/language-server. Do I need another type of server?

That's the right server.

• I have the LSP verbosely configured by copy-pasting the default config and extending the root_dir detection by adding the *.cjs extension to support SvelteKit apps:

Try simplifying your setup, eg. by using the default config from lspconfig and a boilerplate tailwind.config.js.

[Fghurayri]

I'm still having an issue. Maybe there's something off with my setup.

Anyway, thank you for your kind help. 🌹

[ymarkus]

@Fghurayri did you ever manage to fix autocompletion? I'm having the same issue.

[gasacchi]

anyone know how to add new filetype? i want to use it on my Elm file

require('lspconfig').tailwindcss.setup {
  cmd = { "tailwindcss-language-server", "--stdio" },
  filetypes = { "elm", "aspnetcorerazor", "astro", "astro-markdown", "blade", "django-html", "edge", "eelixir", "ejs", "erb", "eruby", "gohtml", "haml", "handlebars", "hbs", "html", "html-eex", "jade", "leaf", "liquid", "markdown", "mdx", "mustache", "njk", "nunjucks", "php", "razor", "slim", "twig", "css", "less", "postcss", "sass", "scss", "stylus", "sugarss", "javascript", "javascriptreact", "reason", "rescript", "typescript", "typescriptreact", "vue", "svelte" },
  init_options = {
    userLanguages = {
      eelixir = "html-eex",
      eruby = "erb"
    }
  },
  on_new_config = function(new_config)
    if not new_config.settings then
      new_config.settings = {}
    end
    if not new_config.settings.editor then
      new_config.settings.editor = {}
    end
    if not new_config.settings.editor.tabSize then
      -- set tab size for hover
      new_config.settings.editor.tabSize = vim.lsp.util.get_effective_tabstop()
    end
  end,
  root_dir = nvim_lsp.util.root_pattern('tailwind.config.cjs', 'tailwind.config.js', 'tailwind.config.ts','postcss.config.cjs', 'postcss.config.js', 'postcss.config.ts', 'package.json', 'node_modules', '.git'),
  settings = {
    tailwindCSS = {
      lint = {
        cssConflict = "warning",
        invalidApply = "error",
        invalidConfigPath = "error",
        invalidScreen = "error",
        invalidTailwindDirective = "error",
        invalidVariant = "error",
        recommendedVariantOrder = "warning"
      },
      validate = true
    }
  }
}

lsp is active when i open .elm file but auto-completion doesn't work

[ymarkus]

What does :LspInfo show? You should use whatever it says for Detected filetype: XY, it might not be elm...

[gasacchi]

2 client attached to this buffer it show elmls and tailwindcss client. i don't know what happen. when using svelte, auto-completion working just fine. but not with elm

[gasacchi]

some folks can get it work on vscode as mention in here https://github.com/tailwindlabs/tailwindcss-intellisense/issues/84#issuecomment-736622127, but i don't know how to use experimental classRegex in here

[TomzBench]

I found this error in nvim lsp.log

7   [ERROR][2022-01-06 20:21:48] ...lsp/handlers.lua:419    "Unhandled exception: Cannot read properties of undefined (reading 'filter')\nTypeError: Cannot read properties of undefined (readi    ng 'filter')\n    at matchClassAttributes (/home/thomas/.local/share/nvim/lspinstall/tailwindcss/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:57:342671)\n        at /home/thomas/.local/share/nvim/lspinstall/tailwindcss/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:57:342963\n    at Generator.next (<anonymous>)\n    at f    ulfilled (/home/thomas/.local/share/nvim/lspinstall/tailwindcss/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:57:339947)"

I think there is some knid of version missmatch?

[bradlc]

Closing this as we now provide the @tailwindcss/language-server package on npm 👍

[jones-sam]

I am able to get tailwind to work with the built-in lsp with neovim, however it creates a large amount of ram usage and makes neovim laggy. Besides tailwind all the other lsp's I have installed are working fine (tsserver, gopls, etc). I tried installing the tailwind lsp in basically every way, with npm, nvim-lsp-installer, through github, even referencing the vscode extension installation, but with all of them I get the same issue.

I was using Coc with tailwind (with this plugin) and I wasn't getting any of these issues.

Anyone have a similar problem and/or solution?

thanks!

Specs: Macbook M1 Neovim 0.7.2