Adding Tailwind CSS IntelliSense into Neovim

The above screenshot shows Tailwind CSS IntelliSense, Linting, and Code Actions!

NOTE: There is a quick video at the bottom of this post showing the usage of Tailwind CSS inside of Neovim.

Introduction

The Tailwind CSS team has a great extension for VS Code that provides IntelliSense to enhance development with support for autocompletion, syntax highlighting, and linting.

That's great, but what about Neovim? Well, Neovim supports LSP (Language Server Protocol), which is a standard developed by Microsoft and used in VS Code. Thankfully the internal LSP portion of the existing VS Code extension can be leveraged by Neovim! Yay for standards!

Installation

NOTE: The following instructions assume you are running Neovim v0.5.0 or a Nightly version

So, how do you get started? Thankfully the process is easier than it was a few months ago. You should be able to follow these steps to get your Neovim up and running with the Tailwind CSS LSP.

1. Install nvim-lspconfig and nvim-lspinstall like any other Vim plugin,

e.g. with vim-plug:

Plug 'neovim/nvim-lspconfig'
Plug 'kabouzeid/nvim-lspinstall'

2. Add Setup Logic to init.lua (or init.vim)

Add the following snippet to your Neovim configuration file. Remember to source your config after updating.

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

NOTE: If you are adding to your init.vim file then you'll need to add lua << EOF as a line above the snippet and append EOF as a new line below the snippet. That allows you to have multiline Lua inside your inti.vim file.

3. Install the Tailwind CSS LSP

The nvim-lspinstall plugin thankfully makes installing the LSP a bit less cumbersome than doing it manually. You can run the following in command mode...

:LspInstall tailwindcss

This will install the necessary LSP as a global dependency and wire-up the necessary configuration information for the server.

4. Restart Neovim

Technically there is additional setup you could add that doesn't require you to restart, but I find manually restarting to be a bit more straightforward. Feel free to add more setup later if you so choose.

5. Check LspInfo to Verify Setup

Now, once you relaunch Neovim and you are in a Tailwind CSS project try to run :LspInfo from command mode to see what LSP are currently running and attached to your current buffer.

:LspInfo

Hopefully, you will see something like the following screenshot. The screenshot shows that I have 3 LSPs attached to my current buffer (TypeScript, EFM, and Tailwind CSS).

6. Profit!

The following video is the final integration after the Tailwind CSS LSP is installed properly and running. In the video the IntelliSense shows up when I start to type a Tailwind CSS class, the linter is able to detect issues with Tailwind CSS classes, and it can detect available Code Actions and update the code to perform the action.

Other Plugins

Your setup may not look exactly like mine. In addtion to the above I'm using the following plugins to assist with autocompletion (hrsh7th/nvim-cmp), fancy LSP GUI (glepnir/lspsaga.nvim), and pretty diagnostic messages (folke/trouble.nvim).

Plug 'hrsh7th/nvim-cmp' 
Plug 'glepnir/lspsaga.nvim' 
Plug 'folke/trouble.nvim' 

NOTE: I needed to recently swap to a fork of tami5/lspsaga.nvim since the main repo broke with Neovim version 0.5.1.