Tailwind Tools for Neovim 安装与配置指南

Tailwind Tools for Neovim 安装与配置指南

tailwind-tools.nvim An unofficial Tailwind CSS integration and tooling for Neovim 项目地址: https://gitcode.com/gh_mirrors/ta/tailwind-tools.nvim

1. 项目基础介绍

Tailwind Tools for Neovim 是一个为 Neovim 编辑器提供 Tailwind CSS 集成和工具的开源项目。它主要使用 Lua 和 JavaScript 编写，利用 Neovim 内置的 LSP 客户端、Treesitter 以及 NodeJS 插件宿主。该项目的目的是在 Neovim 中提供与官方 Visual Studio Code 扩展类似的功能。

2. 关键技术和框架

• Lua 和 JavaScript：项目的主要编程语言。
• Neovim 内置 LSP 客户端：用于提供语言服务，如自动完成、诊断和悬停信息。
• Treesitter：用于解析代码语法树，精确捕捉类值。
• NodeJS 插件宿主：提供与 NodeJS 环境的交互能力。

3. 安装和配置准备工作

在开始安装之前，请确保您已经满足了以下先决条件：

• Neovim 版本 0.9 或更高（推荐使用 0.10 版本）。
• 安装了 tailwindcss-language-server，版本不低于 0.0.14（可以使用 Mason 或 npm 安装）。
• 安装了与 HTML、CSS 和 TSX 语法树兼容的语言 Treesitter 语法（使用 nvim-treesitter）。
• 安装了 Neovim 的 NodeJS 客户端（使用 npm）。

安装步骤

使用 lazy.nvim

1. 在你的 Neovim 配置文件中（通常是 init.lua），添加以下配置：

   return {
     "luckasRanarison/tailwind-tools.nvim",
     name = "tailwind-tools",
     build = ":UpdateRemotePlugins",
     dependencies = {
       "nvim-treesitter/nvim-treesitter",
       "nvim-telescope/telescope.nvim",
       -- 可选
       "neovim/nvim-lspconfig",
     },
     opts = {}
     -- 你的配置
   }
   

2. 如果您使用的是其他包管理器，需要通过运行 :UpdateRemotePlugins 命令来注册远程插件，然后调用 setup 函数来启用 Lua 插件：

   require("tailwind-tools").setup({
     -- 你的配置
   })
   

默认配置

Neovim 0.10 版本要求启用 vscode 类型的内联颜色提示。默认情况下，如果已安装，插件会自动配置 tailwindcss-language-server 使用 nvim-lspconfig。确保您没有在其他地方设置服务器。

以下是默认配置：

{
  server = {
    override = true, -- 如果为 true，则从插件中设置服务器
    settings = {},
    -- 快捷方式 'settings.tailwindCSS'
    on_attach = function(client, bufnr)
      -- 当服务器附加到缓冲区时触发的回调
    end,
  },
  document_color = {
    enabled = true, -- 可以通过命令切换
    kind = "inline", -- "inline" | "foreground" | "background"
    inline_symbol = "󰝤", -- 仅在插入模式下使用
    debounce = 200, -- 毫秒，仅应用于插入模式
  },
  conceal = {
    enabled = false, -- 可以通过命令切换
    min_length = nil, -- 仅隐藏超过提供长度的类
    symbol = "󱏿", -- 只允许使用单个字符
    highlight = {
      -- extmark 高亮选项， see :h 'highlight'
      fg = "#38BDF8",
    },
  },
  cmp = {
    highlight = "foreground", -- 颜色预览样式，"foreground" | "background"
  },
  telescope = {
    utilities = {
      callback = function(name, class)
        -- 选择 telescope 中的 utility 类时使用的回调
      end,
    },
  },
  -- 扩展部分，请参阅扩展章节了解详细信息
  extension = {
    queries = {},
    -- 文件类型到 Lua 模式列表的映射
    patterns = {
      -- 示例:
      -- rust = { "class=[\"']([^\"']+)[\"']" },
      -- javascript = { "clsx%(([^)]+)%)" },
    },
  },
}

以上是 Tailwind Tools for Neovim 的详细安装和配置指南。按照这些步骤操作，您应该能够在 Neovim 中成功使用 Tailwind CSS 的相关功能。

tailwind-tools.nvim An unofficial Tailwind CSS integration and tooling for Neovim 项目地址: https://gitcode.com/gh_mirrors/ta/tailwind-tools.nvim