LSP Cheatsheet
Add the tailwind language server to Neovim.
Tailwindcss
Prerequisites
- node version 22
- nvim-cmp (completion engine)
- Treesitter
- LSPconfig
- Mason
- install global language server
1
npm install -g @tailwindcss/language-server
Tailwind config
tailwind.config.js
Ensure tailwind config is targeting the files that will be using tailwind
1
2
3
4
5
6
7
8
9
module.exports = {
content: ["./src/**/*.{html,twig,js,jsx,ts,tsx}", "./components/**/*.{html,twig}"],
theme: {
extend: {},
},
plugins: [],
};
nvim-cmp config
1
2
"hrsh7th/nvim-cmp"
"hrsh7th/cmp-nvim-lsp"
- set ultisnips
- set lsps
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
-- Set up nvim-cmp.
local cmp = require'cmp'
cmp.setup({
snippet = {
-- REQUIRED - you must specify a snippet engine
expand = function(args)
-- vim.fn["vsnip#anonymous"](args.body) -- For `vsnip` users.
-- require('luasnip').lsp_expand(args.body) -- For `luasnip` users.
-- require('snippy').expand_snippet(args.body) -- For `snippy` users.
vim.fn["UltiSnips#Anon"](args.body) -- For `ultisnips` users.
-- vim.snippet.expand(args.body) -- For native neovim snippets (Neovim v0.10+)
end,
},
window = {
-- completion = cmp.config.window.bordered(),
-- documentation = cmp.config.window.bordered(),
},
mapping = cmp.mapping.preset.insert({
['<C-b>'] = cmp.mapping.scroll_docs(-4),
['<C-f>'] = cmp.mapping.scroll_docs(4),
['<C-Space>'] = cmp.mapping.complete(),
['<C-e>'] = cmp.mapping.abort(),
['<CR>'] = cmp.mapping.confirm({ select = true }), -- Accept currently selected item. Set `select` to `false` to only confirm explicitly selected items.
}),
sources = cmp.config.sources({
{ name = 'nvim_lsp' },
-- { name = 'vsnip' }, -- For vsnip users.
-- { name = 'luasnip' }, -- For luasnip users.
{ name = 'ultisnips' }, -- For ultisnips users.
-- { name = 'snippy' }, -- For snippy users.
}, {
{ name = 'buffer' },
})
})
-- To use git you need to install the plugin petertriho/cmp-git and uncomment lines below
-- Set configuration for specific filetype.
--[[ cmp.setup.filetype('gitcommit', {
sources = cmp.config.sources({
{ name = 'git' },
}, {
{ name = 'buffer' },
})
})
require("cmp_git").setup() ]]--
-- Use buffer source for `/` and `?` (if you enabled `native_menu`, this won't work anymore).
cmp.setup.cmdline({ '/', '?' }, {
mapping = cmp.mapping.preset.cmdline(),
sources = {
{ name = 'buffer' }
}
})
-- Use cmdline & path source for ':' (if you enabled `native_menu`, this won't work anymore).
cmp.setup.cmdline(':', {
mapping = cmp.mapping.preset.cmdline(),
sources = cmp.config.sources({
{ name = 'path' }
}, {
{ name = 'cmdline' }
}),
matching = { disallow_symbol_nonprefix_matching = false }
})
-- Set up lspconfig.
local capabilities = require('cmp_nvim_lsp').default_capabilities()
-- Replace <YOUR_LSP_SERVER> with each lsp server you've enabled.
require('lspconfig')['tailwindcss'].setup {
capabilities = capabilities
}
lspconfig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
local lspconfig = require("lspconfig")
lspconfig.tailwindcss.setup({
cmd = { "tailwindcss-language-server", "--stdio" },
filetypes = { "html", "twig", "css", "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "svelte" },
settings = {
tailwindCSS = {
experimental = {
classRegex = {
{ "class=\"([^\"]+)\"", 1 }, -- Match HTML with double quotes
{ "class='([^']+)'", 1 }, -- Match HTML with single quotes
{ "class:\\s*`([^`]*)`", 1 }, -- Match template literals
{ "className=\"([^\"]+)\"", 1 }, -- JSX className
},
},
},
},
})
Mason
1
:MasonInstall tailwindcss-language-server
Tree-sitter
In your treesitter config file
1
2
3
4
5
6
require'nvim-treesitter.configs'.setup {
ensure_installed = { "html", "css", "javascript", "typescript", "twig" },
highlight = { enable = true },
}
Troubleshooting
List language servers
1
npm list -g @tailwindcss/language-server
should return
1
2
/path/to/global/node_modules
└── @tailwindcss/language-server@x.x.x
1
:LspInfo
1
:LspLog
1
:LspRestart
On the commandline run this simulation command
1
tailwindcss-language-server --stdio
it should return some data and leave you in the the command. The command is waiting for a program like vim to tell it what to do.
run check health
1
:checkhealth
This post is licensed under
CC BY 4.0
by the author.