TailwindCSS performance issues

[mortezadadgar]

FAQ

• [X] I have checked the FAQ and it didn't resolve my problem.

Announcement

• [X] I have checked Breaking change announcement.

Minimal reproducible full config

if has('vim_starting')
  set encoding=utf-8
endif
scriptencoding utf-8

if &compatible
  set nocompatible
endif

let s:plug_dir = expand('/tmp/plugged/vim-plug')
if !filereadable(s:plug_dir .. '/plug.vim')
  execute printf('!curl -fLo %s/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim', s:plug_dir)
end

execute 'set runtimepath+=' . s:plug_dir
call plug#begin(s:plug_dir)
Plug 'hrsh7th/nvim-cmp'
Plug 'hrsh7th/cmp-buffer'
Plug 'hrsh7th/cmp-nvim-lsp'
Plug 'hrsh7th/vim-vsnip'
Plug 'neovim/nvim-lspconfig'
call plug#end()
PlugInstall | quit

" Setup global configuration. More on configuration below.
lua << EOF
local cmp = require "cmp"
cmp.setup {
  snippet = {
    expand = function(args)
      vim.fn["vsnip#anonymous"](args.body)
    end,
  },

  mapping = {
    ['<CR>'] = cmp.mapping.confirm({ select = true })
  },

  sources = cmp.config.sources({
    { name = "nvim_lsp" },
    { name = "buffer" },
  }),
}
EOF

lua << EOF
local capabilities = require('cmp_nvim_lsp').default_capabilities()

require'lspconfig'.tailwindcss.setup {
  capabilities = capabilities,
}
EOF

Description

I know https://github.com/hrsh7th/nvim-cmp/pull/1583 and https://github.com/hrsh7th/nvim-cmp/pull/1574 has improved the performance of tailwindcss completions but I think performance still is not on pair with programs such as vscode.

the issue is apparent after inserting a new space after the bg-white class in recorded video
https://github.com/hrsh7th/nvim-cmp/assets/27911493/5aca7637-f5c6-4264-9bfb-99d9ee1008d6

recorded another video to better illustrate it https://github.com/hrsh7th/nvim-cmp/assets/27911493/5492540e-901a-43cf-9e27-0c0688443fc2

Steps to reproduce

initialize tailwindcss in any web development project and type in a html tag class.

Expected behavior

to be butter smooth.

Actual behavior

described in description section.

Additional context

No response

[dan-cooke]

Yep I am still experiencing major lag with tailwind LSP installed, I have resorted to removing it. LSP zero config

local lsp = require('lsp-zero').preset({
})

local lspconfig = require('lspconfig')

lsp.ensure_installed({
    'tsserver',
    'eslint',
    'rust_analyzer',
})

lsp.on_attach(function(client, bufnr)
    local capabilities = vim.lsp.protocol.make_client_capabilities()
    capabilities.textDocument.completion.completionItem.snippetSupport = true
    lsp.default_keymaps({ buffer = bufnr })
    lsp.buffer_autoformat()
end)

vim.keymap.set("n", "gr", ":lua vim.lsp.buf.rename() <cr> :wall <cr>")
vim.keymap.set("n", "<leader>g", ":lua vim.lsp.buf.hover() <cr>")
vim.keymap.set("n", "<leader>]", ":lua vim.diagnostic.goto_next() <cr>")
vim.keymap.set("n", "<leader>[", ":lua vim.diagnostic.goto_prev() <cr>")
vim.keymap.set("n", "gh", ":lua vim.diagnostic.open_float() <cr>")
vim.keymap.set("n", "gd", ":lua vim.lsp.buf.definition() <cr>")
vim.diagnostic.config({
    virtual_text = false,
    root_dir = require("lspconfig.util").root_pattern(".git")
})

lsp.format_on_save({
    format_opts = {
        async = false,
        timeout_ms = 10000,
    },
    servers = {
        ['rust_analyzer'] = { 'rust' },
        ['prettier'] = { 'css', 'html', 'javascript', 'javascriptreact', 'json', 'less', 'scss', 'typescript', 'typescriptreact', 'vue' },
    }
})

lsp.set_server_config({
    on_init = function(client)
        client.server_capabilities.semanticTokensProvider = nil
    end,
})

lsp.set_sign_icons({
    error = '✘',
    warn = '▲',
    hint = '⚑',
    info = '»'
})

lspconfig.tsserver.setup({
    root_dir = require("lspconfig.util").root_pattern(".git"),
    flags = {
        allow_incremental_sync = false,
        debounce_text_changes = 500,
    },
})

lsp.setup()

nvim-cmp config

local cmp = require('cmp')
local lspkind = require('lspkind')

cmp.setup({
    mapping = {
        ['<CR>'] = cmp.mapping.confirm({ select = false }),
        ['<C-c>'] = cmp.mapping.complete(),
        ['<C-e>'] = cmp.mapping(function(fallback)
            if cmp.visible() then
                cmp.abort()
            else
                fallback()
            end
        end, { 'i', 'c' }),
        ["<Tab>"] = cmp.mapping(function(fallback)
            if cmp.visible() then
                cmp.select_next_item({ behavior = cmp.SelectBehavior.Select })
            else
                fallback()
            end
        end),
        ['<S-Tab>'] = cmp.mapping.select_prev_item({ behavior = cmp.SelectBehavior.Insert }),
    },

    formatting = {
        format = lspkind.cmp_format({
            mode = "symbol_text",
            max_width = 50,
            symbol_map = { Copilot = "" }
        })
    },

    experimental = {
        ghost_text = true,
    },

    snippet = {
        -- REQUIRED - you must specify a snippet engine
        expand = function(args)
            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.
        end,
    },

    sources = {
        -- Other Sources
        -- { name = "copilot",  group_index = 2 },
        { name = "nvim_lsp", group_index = 2, keyword_length = 6 },
        { name = "path",     group_index = 2 },
        { name = "luasnip",  group_index = 2 },
    },
})

Ram usage has got has high as 99% with tailwind LSP enabled, without it im always sitting around 30% with Firefox open

[Shougo]

Hm.... But this is tailscale LS problem.

[mortezadadgar]

@Shougo but mini.completion and vscode doesn't suffer from this issue

[Shougo]

I think mini.completion does not use fuzzy match. If the items are very big from LS, nvim-cmp fuzzy match is very slow.

[Shougo]

I have tested it. Hm. It seems slow.

Its slowness is from:

• The auto completion keyword length is 0(The items are very huge)

• If items are huge, the filtering is very slow(Because it is fuzzy match)

[Shougo]

You can change keyword_length and disable fuzzy match.

https://github.com/hrsh7th/nvim-cmp/blob/main/doc/cmp.txt#L493

https://github.com/hrsh7th/nvim-cmp/blob/main/doc/cmp.txt#L539

[Shougo]

It is better for me.

" Setup global configuration. More on configuration below.
lua << EOF
local cmp = require "cmp"
cmp.setup {
  snippet = {
    expand = function(args)
      vim.fn["vsnip#anonymous"](args.body)
    end,
  },

  mapping = {
    ['<CR>'] = cmp.mapping.confirm({ select = true })
  },

  matching = {
    disallow_partial_matching = true,
    disallow_fuzzy_matching = true,
    disallow_prefix_unmatching = true,
  },

  sources = cmp.config.sources({
    { name = "nvim_lsp", keyword_length = 2 },
    { name = "buffer" },
  }),
}
EOF

lua << EOF
local capabilities = require('cmp_nvim_lsp').default_capabilities()

require'lspconfig'.tailwindcss.setup {
  capabilities = capabilities,
}
EOF

[dan-cooke]

@Shougo i will try disabling these settings and get back to you, my keyword length was 6 though and still very slow

[dan-cooke]

@Shougo yeah that's faster but now it just a really subpar experience in my opinion.

[Shougo]

source.complete = function(self, params, callback)
  local lsp_params = vim.lsp.util.make_position_params(0, self.client.offset_encoding)
  lsp_params.context = {}
  lsp_params.context.triggerKind = params.completion_context.triggerKind
  lsp_params.context.triggerCharacter = params.completion_context.triggerCharacter
  self:_request('textDocument/completion', lsp_params, function(_, response)
    vim.print(response)
    callback(response)
  end)
end

I have checked response. The response is not filtered by LS and the size is very huge.

    }, {
      kind = 21,
      label = "forced-color-adjust-none",
      sortText = "11282"
    } }

11282 items are returned. It is slow for Lua.

[mortezadadgar]

yeah nvim-cmp to filter and sort all those responses primary reason is that tailwindcss triggers completion on spaces which send the maximum number of completion items; removing space from triggerCharacters can significantly improves performance

vim.api.nvim_create_autocmd("LspAttach", {
    group = vim.api.nvim_create_augroup("UserLspConfig", {}),
    callback = function(ev)
        for _, client in pairs((vim.lsp.get_clients {})) do
            if client.name == "tailwindcss" then
                client.server_capabilities.completionProvider.triggerCharacters =
                    { '"', "'", "`", ".", "(", "[", "!", "/", ":" }
            end
        end
    end,
})