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?

[ahmedelgabri]

I found this issue while looking for the same thing but for vim (I know about coc-tailwind) but I'm using the native LSP from neovim & not coc.nvim.

[noor-tg]

hey @steveeq1 , I am here for the same thing (tailwind intel support for emacs).
In first I thought I will find long list for object props with each key is the class name and the value is the corresponding css rule.
and I simply will add this long object to some thing like yasnippet files (after some string transformation).
if you have any plans about this mention me.

[strikerlulu]

Ya if this was an lsp we could add it in
https://emacs-lsp.github.io/lsp-mode/page/adding-new-language/

[julianrubisch]

Well it does seem like it’s already there? https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-intellisense/src/lsp/server.ts

Is there a way to run this standalone?

[agorgl]

Publishing as a standalone package could open the way to make user packages on distros like arch for this too like https://aur.archlinux.org/packages/nodejs-vls/

[yassinebridi]

This could be integrated with the new NVIM lsp beautifully.

[agorgl]

Made PR #263 towards this. With this patch extracting the prebuilt extension bundle and running node extension/dist/server/index.js --stdio works with vim-lsp (and I suppose with all other LSP clients)

[kabouzeid]

node extension/dist/server/index.js --stdio also works fine with neovim 0.5 built in language client. Having the server bin on npm would be great :)

[kabouzeid]

If you are using nvim-lspconfig, setting this handler will make hover work :)

... .setup {
    ...
    handlers = {
      ["tailwindcss/getConfiguration"] = function (_, _, params, _, bufnr, _)
        -- tailwindcss lang server waits for this repsonse before providing hover
        vim.lsp.buf_notify(bufnr, "tailwindcss/getConfigurationResponse", { _id = params._id })
      end
    },
    ...
}

[pedropmedina]

@elartista @kabouzeid can you guys provide a step by step as to how to setup this with neovim built-in lsp? Thanks
For those looking for a way to get tailwindcss working with neovim build-in lsp check https://github.com/kabouzeid/nvim-lspinstall

[MindTooth]

I'm using this script to download the client into ~/.bin/.

From there I use the following snippet for vim-lsp:

  if executable('tailwindcss-intellisense')
    autocmd User lsp_setup call lsp#register_server({
          \ 'name': 'tailwindcss-intellisense',
          \ 'cmd': {server_info->['tailwindcss-intellisense', '--stdio']},
          \ 'allowlist': ['css', 'html', 'htmldjango'],
          \ 'root_uri': {server_info->lsp#utils#path_to_uri(lsp#utils#find_nearest_parent_file_directory(lsp#utils#get_buffer_path(), 'tailwind.config.js'))},
          \ })
  endif

Just thought I share as I've been at this for some time and wanted to help others. 😛

[kabouzeid]

For neovim's built in LSP you can install it conveniently with https://github.com/kabouzeid/nvim-lspinstall

[Tonksthebear]

Has anyone had success getting the this working with Coc.vim? I'm new to lsp and I'm trying to map this thread to coc.vim's documentation for setting up a custom language server.

I used the script @MindTooth provided, then I added the following config

tailwindcss: {
  command¦: ~/languageservers/tailwindcss/tailwindcss-intellisense,
  args¦: [--stdio],
  filetypes: [html, erb, rb],
  initializationOptions: {},
  settings: {}
}

I get this in the coc.vim's log

Language server "languageserver.tailwindcss" started with 3523033

Which makes me think it's 90% of the way there, but perhaps I'm missing an option that I need to pass for the two to actually communicate? I checked the code from nvim-lspinstall and I don't see any extra parameters that is passing along to the tailwind server. I'm not having much luck from here, so I thought I'd check if anyone has experience with this

[MindTooth]

I don’t see some sort of root config. I believe for the ls to work, it needs a tailwind.config.js file.

You see mine under root_uri. Though, I can’t for sure say that that is the reason.

[kabouzeid]

@Tonksthebear your coc config should be fine. But for tailwind to work, your project already needs to be a "tailwind" project, ie you need to have tailwind.config.js, and tailwindcss in your package.json. I recommend you to open your project first with VSCode and see if tailwind completions work there, to verify your project is setup correctly for tailwind-intellisense.

There are a two coc extensions for tailwind, but they are outdated, I wouldn't use them.

Right now, if you want to get tailwind intellisense working with all the bells and whistles (preview in completion menu and hover support), you need to either use nvim-lsp + the config in nvim-lspinstall, or coc.nvim + fork tailwind-intellisense and make a coc.nvim extension from it.

[kabouzeid]

@Tonksthebear

you also need to add something like

"rootPatterns": ["tailwind.config.js", ".git/"],

to your coc tailwind lsp config, so that the root dir for the server can be set. It won't work without it.

[Tonksthebear]

@kabouzeid thanks for the suggestions. I actually started this process by making sure it works with VSCode first, so it is fully working there! Must just be weird coc specific things, or not configuring the rootPattern like you suggested. Ultimately, I don't want to sink my time into this when I can just go with nvim-lsp/vim-lsp and have it work easily. And judging from the coc-tailwind plugins, they're not going to be maintained, so I don't want to run into issues whenever there is an update. So, time to swap those out!

[kabouzeid]

I made a coc tailwindcss plugin for myself, I just needed to make some coc specific adjustments to the VSCode extension to make it work. It's probably outdated now and it's annoying to keep in sync with the upstream repo. Also never published it because I switched to nvim-lsp shortly after.

nvim-lsp is less "plug and play" than coc.nvim, but it's much more configurable and I prefer it that way.

With nvim-lsp it's even possible to get tailwinds color highlighting (https://www.reddit.com/r/neovim/comments/mi9wli/got_tailwindcss_color_highlighting_working/), I haven't found time to publish this yet, but probably will do so this weekend :)

Quick guide if you want to get started with nvim-lsp:

1. You need neovim 0.5 nightly
2. Install https://github.com/neovim/nvim-lspconfig. This is because nvim-lsp is intentionally a low level lsp implementation. The official nvim-lspconfig plugin is sort of a higher level API on top with many conveniences. Make sure to read their README and have a look at the sample config, this will get you started with most of the things you need to know.
3. (optionally) install https://github.com/kabouzeid/nvim-lspinstall so that you can conveniently install language servers, with eg :LspInstall python.

If you need any help setting up, feel free to let me know :)

[agorgl]

I created an AUR package for all the Arch Linux users out there:
https://aur.archlinux.org/packages/vscode-tailwindcss-language-server-bin/

[polyzen]

I created an AUR package for all the Arch Linux users out there:
https://aur.archlinux.org/packages/vscode-tailwindcss-language-server-bin/

There's now also https://aur.archlinux.org/packages/tailwindcss-language-server/ which builds from source.

[singlexyz]

Install lspinstall plugin:
Plug 'kabouzeid/nvim-lspinstall'

Set it up:

require'lspinstall'.setup() -- important

local servers = require'lspinstall'.installed_servers()
for _, server in pairs(servers) do
  require'lspconfig'[server].setup{}
end

Then execute:
:LspInstall tailwindcss

and restart vim. It works.

[kabouzeid]

@singlexyz with the config from your comment, you also need to restart neovim after :LspInstall tailwindcss

[MatthiasGrandl]

@kabouzeid am I missing something, or do your instruction not include how to get the color highlighting to work? Everything else works fine for me.

[kabouzeid]

You have to configure color highlighting yourself. You might be able to figure it out from my dotfiles (https://github.com/kabouzeid/dotfiles/blob/master/nvim/lua/lsp-documentcolors.lua)

I hope to find the time to release a plugin for this in future.

[MatthiasGrandl]

@kabouzeid ah got it, thanks!

[aridgupta]

I am new to neovim 0.5 and lua. I am having trouble setting up tailwindcss lsp with it. Could somebody please show me how? I don't want to use nvim-lspinstall package.

[polyzen]

@aridgupta, made a pull request to import the config:
neovim/nvim-lspconfig#966

They intend to make the server installable with npm, but I don't think that's available yet.

If you're using Arch Linux, you can install the server with this package:
https://aur.archlinux.org/packages/tailwindcss-language-server/

[bradlc]

This is the error appearing with the 0.6.9 GitHub release when running the server with node tailwindServer.js

Ah yeah that makes sense. We don't ship the watcher binaries with the VS Code extension because they are not needed. These will be included in the standalone package when I publish it 👍

For now you can use v0.6.8 since there's not actually any new language server features in v0.6.9 so it's functionally equivalent outside of VS Code.

[jim-at-jibba]

Any news on the npm pacakge?

[agorgl]

Waiting for this too!

[agorgl]

For Vim friends on Arch Linux that use the vim-lsp plugin:

Install ​the server with this package:
https://aur.archlinux.org/packages/tailwindcss-language-server/

Use this configuration:

" TailwindCSS language server
if executable('tailwindcss-language-server')
   ​au User lsp_setup call lsp#register_server({
       ​\ 'name': 'tailwindcss-language-server',
       ​\ 'cmd': {server_info->[&shell, &shellcmdflag, 'tailwindcss-language-server --stdio']},
       ​\ 'root_uri': {server_info->lsp#utils#path_to_uri(lsp#utils#find_nearest_parent_file_directory(lsp#utils#get_buffer_path(), 'tailwind.config.js'))},
       ​\ 'initialization_options': {},
       ​\ 'whitelist': ['css', 'less', 'sass', 'scss', 'vue'],
       ​\ })
endif

Make sure that the tailwind dependencies in your project are installed using npm install or the completion won't work.
Also make sure that a tailwind.config.js exists in the root of your project.
Completion will work, and you can also see the analytic css classes used with the LspHover command over a tailwind class!

[rocinant3]

Install lspinstall plugin:
Plug 'kabouzeid/nvim-lspinstall'

Set it up:

require'lspinstall'.setup() -- important

local servers = require'lspinstall'.installed_servers()
for _, server in pairs(servers) do
  require'lspconfig'[server].setup{}
end

Then execute:
:LspInstall tailwindcss

and restart vim. It works.

Can you share nvim config?

[rocinant3]

Class completion is very strange. What is the problem?

tailwind lsp setup

 lua require('lspconfig').tailwindcss.setup{on_attach=require('completion').on_attach, cmd={'node','/home/donkyhot/.config/nvim/plugged/tailwindcss-intellisense/extension/dist/server/tailwindServer.js','--stdio'}}

LspInfo:

[kabouzeid]

probably because the newest version of tailwindlabs/tailwindcss-intellisense has some problems outside of VSCode when used as is. Try if it works with version 0.6.8 for now

[rocinant3]

@kabouzeid, its 0.6.8

[kabouzeid]

hmm idk then

[rocinant3]

@kabouzeid, this is an auto-completion problem (hints are cleared as soon as you enter the "-" character) What do you use for auto-completion with tailwind?

[kabouzeid]

compe

[rocinant3]

The problem was with the nvim-lua/completion-nvim plugin. After switching to compe, everything worked as it should

[mcchrish]

This is the error appearing with the 0.6.9 GitHub release when running the server with node tailwindServer.js

Ah yeah that makes sense. We don't ship the watcher binaries with the VS Code extension because they are not needed. These will be included in the standalone package when I publish it 👍

For now you can use v0.6.8 since there's not actually any new language server features in v0.6.9 so it's functionally equivalent outside of VS Code.

Seem the standalone language-server is already published in npm and lspconfig updated the instructions as follows: https://github.com/neovim/nvim-lspconfig/blob/master/CONFIG.md#tailwindcss

https://www.npmjs.com/package/@tailwindcss/language-server

[agorgl]

@polyzen can you update the AUR package?

[polyzen]

That's says version 0.0.2.

Edit: Ah, the language server has its own version.

Edit 2:

@polyzen can you update the AUR package?

@elartista Done 🚀
https://aur.archlinux.org/cgit/aur.git/commit/PKGBUILD?h=tailwindcss-intellisense&id=1124dd7b76915b14fb3f8587d114f76d7f88b851

[Fghurayri]

Hello friends,

Sorry if this is not the right place.

I have followed the instructions here but the autocomplete isn't working.

I've setup the following packages as recommended by Lsp config team:

  use 'neovim/nvim-lspconfig'
  use 'hrsh7th/nvim-cmp' -- Autocompletion plugin
  use 'hrsh7th/cmp-nvim-lsp' -- LSP source for nvim-cmp
  use 'saadparwaiz1/cmp_luasnip' -- Snippets source for nvim-cmp

I have confirmed that the basic plumping for other languages like JS, Svelte, Elixir are working as expected - Tailwind isn't :(

When I run the :LspInfo command I can see tailwindcss as an active-attached-to-buffer client.

[polyzen]

As stated in the readme, you need to have Tailwind installed and have a config file for it.

nvim-lspconfig will start tailwindcss-language-server based on the existence of certain files in the project's root dir, but apparently the server will not do anything without a config file. Tailwind itself apparently doesn't require a config file, so that may be what's causing the confusion.

[Fghurayri]

@polyzen Thank you so much for your quick reply!

• I have Tailwind installed successfully with its config. Verified by applying a couple of classes and running the project.
• I have the server installed via npm install -g @tailwindcss/language-server. Do I need another type of 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:

require('lspconfig').tailwindcss.setup {
  cmd = { "tailwindcss-language-server", "--stdio" },
  filetypes = { "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
    }
  },
  flags = { debounce_text_changes = 150, }
}

I hope the problem is easily detectable for you.

[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 #84 (comment), 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