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

npm install -g @tailwindcss/language-server

Tailwind config

tailwind.config.js Ensure tailwind config is targeting the files that will be using tailwind

module.exports = {
  content: ["./src/**/*.{html,twig,js,jsx,ts,tsx}", "./components/**/*.{html,twig}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

nvim-cmp config

"hrsh7th/nvim-cmp"
"hrsh7th/cmp-nvim-lsp"

• set ultisnips
• set lsps

-- 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

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

:MasonInstall tailwindcss-language-server

Treesitter

In your treesitter config file

require'nvim-treesitter.configs'.setup {
  ensure_installed = { "html", "css", "javascript", "typescript", "twig" },
  highlight = { enable = true },
}

Troubleshooting

List language servers

npm list -g @tailwindcss/language-server

should return

/path/to/global/node_modules
└── @tailwindcss/language-server@x.x.x

:LspInfo

:LspLog

:LspRestart

On the commandline run this simulation command

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

:checkhealth