Michael Dyrynda
Home Blog Podcasts
 
Using tailwind-intellisense with Neovim LSP August 2nd, 2021
Working tailwind-intellisense in Neovim

I've recently made the transition from Vim (legacy Vim? OG Vim?) to Neovim and in doing so, have been stripping out extraneous configuration to only the bare essentials.

This has meant dropping my dependency on Conquerer of Completion in favour of Neovim's built-in LSP support.

Unfortunately, this had also meant that the coc-tailwind-intellisense plugin I had been using previously was off the table.

I recently pulled together information from a few different places, in order to get back to Tailwind glory, and am documenting it here for all and sundry.

Install nvim-lspconfig

To keep things simple, I make use of the nvim-lspconfig plugin. This provides a collection of common configurations for use with the built-in LSP client. The plugin will handle automatically launching and initialising language servers that you have installed on your computer.

I'm using vim-plug, so installation is a breeze:

1" ~/.config/nvim/init.vim
2Plug 'neovim/nvim-lspconfig'
3 
4source ~/.config/nvim/lsp.lua

Install tailwind-intellisense

Configuration for Tailwind was added to nvim-lspconfig, so one of the previously-manual steps has been taken care of.

At the time of writing, the Tailwind team haven't published a standalone binary for the LSP server behind their first-party package, but it's just a few short steps to get it ready yourself.

First, fetch the latest tailwind-intellisense plugin.

1curl -L https://github.com/tailwindlabs/tailwindcss-intellisense/releases/download/v0.6.13/vscode-tailwindcss-0.6.13.vsix -o tailwindcss-intellisense.vsix

Next, extract the archive, remove the extraneous bits, and make the server file executable. You'll want to make sure you extract the archive to somewhere that is in your $PATH. For me, this is in ~/bin

1unzip -d ~/bin/ tailwindcss-intellisense.vsix
2rm tailwindcss-intellisense.vsix
3cd ~/bin
4rm \[Content_Types\].xml extension.vsixmanifest
5chmod +x extension/dist/server/index.js

Next, create the "executable" that will be used by Neovim's LSP client as the server command.

1cat <<EOF > tailwindcss-language-server
2#!/usr/bin/env bash
3 
4DIR=\$(cd \$(dirname \$0); pwd)
5node \$DIR/extension/dist/server/index.js \$*
6EOF
7 
8chmod +x tailwindcss-language-server

Lastly, tell Neovim you want to use the Tailwind language server.

1-- ~/.config/nvim/lsp.lua
2require('lspconfig').tailwindcss.setup { }

Conclusion

Now, as long as your working directory has Tailwind configured in it (compiled CSS and Tailwind in your package.json file), nvim-lspconfig will detect and load the Tailwind language server, and start providing you with autocompletion, for relevant file types.

As an added bonus, this will even work when you're using Tailwind's JIT mode.

Thanks to work done by Daniel Capella on nvim-lspconfig and Matt for the installation instructions

I'm a real developer ™
Michael Dyrynda

@michaeldyrynda

I am a software developer specialising in PHP and the Laravel Framework, and a freelancer, blogger, and podcaster by night.

Proudly hosted with Vultr

Syntax highlighting by Torchlight