NvChad配置下Neovim中Tailwind CSS IntelliSense补全异常求助

我基于NvChad配置Neovim，安装Tailwind CSS自动补全后出现异常：仅能显示文件首次打开时已存在的类名，新添加的类名无法触发补全，功能基本无法正常使用。调试许久未找到原因，以下是相关配置文件及自定义插件列表：

相关配置文件 #

~/.config/nvim/lua/custom/configs/lspconfig.lua #

-- ...

lspconfig.tailwindcss.setup {
  cmd = { "tailwindcss-language-server", "--stdio" },
  filetypes = { "html", "css", "scss", "javascript", "javascriptreact", "typescript", "typescriptreact", "vue" },
  root_dir = lspconfig.util.root_pattern("tailwind.config.js", "package.json"),
  settings = {},
}

-- ...

~/.config/nvim/lua/plugins/configs/cmp.lua #

-- ...

local options = {
  -- ...
  sources = {
    { name = "nvim_lsp" },
    { name = "luasnip" },
    { name = "buffer" },
    { name = "nvim_lua" },
    { name = "path" },
    { name = "tailwindcss" },
  },
}

-- ...

自定义插件列表（其余为NvChad默认插件） #

-- Custom plugins

  {
    "jose-elias-alvarez/null-ls.nvim",
    config = function(_, opts)
      local null_ls = require "null-ls"

      local group = vim.api.nvim_create_augroup("lsp_format_on_save", { clear = false })
      local event = "BufWritePre" -- or "BufWritePost"
      local async = event == "BufWritePost"

      null_ls.setup {
        on_attach = function(client, bufnr)
          if client.supports_method "textDocument/formatting" then
            vim.keymap.set("n", "<Leader>f", function()
              vim.lsp.buf.format { bufnr = vim.api.nvim_get_current_buf() }
            end, { buffer = bufnr, desc = "[lsp] format" })

            -- format on save
            vim.api.nvim_clear_autocmds { buffer = bufnr, group = group }
            vim.api.nvim_create_autocmd(event, {
              buffer = bufnr,
              group = group,
              callback = function()
                -- Fix ESLint errors:
                vim.cmd "EslintFixAll"
                -- Format with Prettier:
                vim.lsp.buf.format { bufnr = bufnr, async = async }
              end,
              desc = "[lsp] format on save",
            })
          end

          if client.supports_method "textDocument/rangeFormatting" then
            vim.keymap.set("x", "<Leader>f", function()
              vim.lsp.buf.format { bufnr = vim.api.nvim_get_current_buf() }
            end, { buffer = bufnr, desc = "[lsp] format" })
          end
        end,
      }
    end,
  },

  {
    "MunifTanjim/prettier.nvim",
    lazy = false,
    config = function()
      local prettier = require "prettier"

      prettier.setup {
        bin = "prettierd",
        cli_options = {
          config_precedence = "prefer-file",
        },
        filetypes = {
          "css",
          "graphql",
          "html",
          "javascript",
          "javascriptreact",
          "json",
          "less",
          "markdown",
          "scss",
          "typescript",
          "typescriptreact",
          "yaml",
        },
      }

      vim.cmd [[
        augroup FormatAutogroup
          autocmd!
          autocmd BufWritePre *.js,*.jsx,*.json,*.md,*.html,*.css,*.scss,*.ts,*.tsx,*.yaml,*.yml,*.yaml,*.graphql :Prettier
        augroup END
      ]]
    end,
  },

  {
    "github/copilot.vim",
    lazy = false,
  },

  {
    "rmagatti/auto-session",
    lazy = false,
    config = function()
      require("auto-session").setup {
        log_level = "error",
        auto_session_suppress_dirs = { "~/", "~/Projects", "~/Downloads", "/" },
      }
    end,
  }

  -- Automatically close HTML and other tags:
  {
    "windwp/nvim-ts-autotag",
    ft = {
      "astro",
      "glimmer",
      "handlebars",
      "html",
      "javascript",
      "javascriptreact",
      "markdown",
      "php",
      "rescript",
      "svelte",
      "typescriptreact",
      "typescript",
      "vue",
      "xml",
    },
    config = function()
      require("nvim-ts-autotag").setup()
    end,
  },

解决思路及方案 #

1. 强化Tailwind语言服务器的文件监听 #

Tailwind语言服务器依赖文件变更监听更新补全集，在lspconfig.tailwindcss.setup中添加配置强制开启监听：

lspconfig.tailwindcss.setup {
  cmd = { "tailwindcss-language-server", "--stdio" },
  filetypes = { "html", "css", "scss", "javascript", "javascriptreact", "typescript", "typescriptreact", "vue" },
  root_dir = lspconfig.util.root_pattern("tailwind.config.js", "package.json"),
  settings = {
    tailwindCSS = {
      validate = true,
      fileIncludeGlob = {"**/*.{html,js,jsx,ts,tsx,vue,css,scss}"},
      fileExcludeGlob = {}
    }
  },
}

2. 修复CMP来源冲突 #

当前同时启用了nvim_lsp和tailwindcss两个补全来源，可能导致冲突。建议保留nvim_lsp（Tailwind补全已通过LSP提供），移除单独的tailwindcss来源：

local options = {
  -- ...
  sources = {
    { name = "nvim_lsp" },
    { name = "luasnip" },
    { name = "buffer" },
    { name = "nvim_lua" },
    { name = "path" },
    -- 移除该行
    -- { name = "tailwindcss" },
  },
}

若需单独使用cmp-tailwindcss插件，确保插件已正确安装并配置触发条件。

3. 排查自动插件冲突 #

配置中的auto-session和保存时格式化的自动命令可能干扰文件变更通知：

• 临时关闭auto-session测试补全是否恢复
• 将格式化自动命令的BufWritePre改为BufWritePost，避免保存前修改导致服务器未捕获变更

4. 手动重启语言服务器 #

修改文件后补全未更新时，可手动重启Tailwind服务器：

:LspRestart tailwindcss

也可添加快捷键绑定：

vim.keymap.set("n", "<Leader>tr", function() 
  vim.lsp.stop_client(vim.lsp.get_active_clients({name = "tailwindcss"})); 
  vim.cmd("LspStart tailwindcss") 
end, {desc = "Restart Tailwind LSP"})

5. 验证项目Tailwind配置 #

确保项目根目录存在tailwind.config.js，且content字段包含你的文件路径：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,vue,html}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

内容的提问来源于stack exchange，提问作者Daniel