在 Zed 中为 Gleam 配置 Tailwind CSS 语言服务器：settings.json 配置全解与实现原理

Zed 为 Gleam 提供了语言支持，但其核心的自动补全与类名提示（Tailwind CSS IntelliSense）并不会默认作用于 .gleam 文件，需要你在 settings.json 中为 Gleam 语言显式启用 tailwindcss-language-server，并通过 experimental.classRegex 告知它从哪些字符串字面量中提取 CSS 类名。本文以 Zed 仓库的 docs/src/languages/gleam.md 为主线，逐项拆解这段配置的每个字段、语义与生效范围，并结合仓库源码说明其底层实现与注册机制，帮你一次配通 Gleam + Tailwind 的开发环境。

背景：Zed 中的 Gleam 语言支持来自扩展

在 Zed 中，Gleam 的语法高亮与语言服务能力由社区维护的 Gleam 扩展提供（官方文档称其为 "Gleam extension"）。安装该扩展后，Zed 便能识别 .gleam 文件，并为 Gleam 语言注册对应的 Tree-sitter 语法解析器与语言服务器：

• Tree-sitter 语法：基于 gleam-lang/tree-sitter-gleam 提供解析器（Zed 的扩展编写规范中即以 Gleam 语法作为示例，可参见 docs/src/extensions/languages.md 中 [grammars.gleam] 对 gleam-lang/tree-sitter-gleam 仓库的引用）；
• 语言服务器：基于 gleam-lang/gleam 仓库内 compiler-core/src/language_server 实现的 gleam lsp。

Gleam 语言服务器本身提供了跳转到定义（go-to definition）、自动导入、编译诊断等能力。当你首次打开 .gleam 文件时，Zed 会自动下载并持续更新所需的语言服务器，无需手动干预（详见 docs/src/configuring-languages.md）。

但要注意：这些能力与 Tailwind CSS 类名补全是两个独立的体系。Tailwind 的工具链由 tailwindcss-language-server 语言服务器承担，而它并不会被自动附加到 Gleam 语言上，这正是下文需要手工配置的原因。

为什么 Gleam 默认拿不到 Tailwind 提示：语言服务器注册的取舍

Zed 内置了对 Tailwind 语言服务器的基础适配。从源码 crates/languages/src/lib.rs 可以看到，Zed 将 tailwindcss-language-server 注册为一个"可用（available）"的语言服务器适配器，并把它默认挂载到一批内置语言上：

// crates/languages/src/lib.rs
let tailwind_languages = [
    "Astro",
    "CSS",
    "ERB",
    "HTML+ERB",
    "HEEx",
    "HTML",
    "JavaScript",
    "TypeScript",
    "PHP",
    "Svelte",
    "TSX",
    "Vue.js",
];

从源码结构可以看出，Zed 只对上述默认语言列表直接注册 Tailwind 适配器，列表并不包含 Gleam。这就是为什么 Gleam 文件里即使写了完整类名字符串，也得不到补全与 lint——tailwindcss-language-server 根本没有被派发到 Gleam 缓冲区上。

好在注册逻辑留出了扩展点：代码注释（crates/languages/src/lib.rs#L239-L246）明确指出，用户可以通过 language_servers 设置，为任意语言（包括扩展引入的语言）手工追加"内置语言服务器"。Gleam 文档给出的配置正是利用了这一机制。

完整配置：为 Gleam 启用 Tailwind CSS 语言服务器

将以下内容合并到你 Zed 的 settings.json（可通过命令面板执行 zed::OpenSettings 打开用户设置，或编辑当前项目的 .zed/settings.json），即可在 Gleam 文件中获得 Tailwind CSS 语言服务器的自动补全与 lint 能力：

{
  "languages": {
    "Gleam": {
      "language_servers": ["tailwindcss-language-server", "..."]
    }
  },
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": ["\"([^\"]*)\""]
        }
      }
    }
  }
}

下面逐段解释配置含义。

languages.Gleam.language_servers：控制语言服务器派发列表

language_servers 是 Zed 控制"某个语言由哪些语言服务器服务"的核心设置。其语义在 docs/src/configuring-languages.md 中有完整说明，要点如下：

• 数组中按顺序列出服务器名称，Zed 会按顺序派发诊断与补全请求；
• 条目前的 ! 前缀表示禁用该服务器；
• 特殊条目 "..." 是一个通配符，代表"当前语言已注册但未在列表中显式列出的其余所有服务器"，并插入到该位置；
• 该数组会整体覆盖语言的默认配置，而不是增量合并。

因此本例的含义是：为 Gleam 语言显式启用 tailwindcss-language-server，同时通过 "..." 保留 Gleam 扩展原先注册的全部服务器（如 gleam LSP）。省略 "..." 会导致 Gleam 自己的语言服务器被顶掉，务必保留。

同理，如果你出于某种原因不希望某个服务器生效，可以写成 "!tailwindcss-language-server" 的形式；若同时再叠加 "..." 通配符，则需注意通配符会把你未显式禁用的其余服务器全部拉回来（包括默认被禁用、但在扩展注册时处于可用状态的那些）。

lsp.tailwindcss-language-server.settings.experimental.classRegex：告诉服务器去哪儿找类名

tailwindcss-language-server 默认只会在它认识的、与 HTML/JSX 等强关联的上下文中扫描类名。对于 Gleam 这类非前端语言，它不知道文件里的哪些字符串是 CSS 类名，因此需要通过 experimental.classRegex 提供自定义的类名提取正则。

这里的正则 ["([^"]*)"] 含义为：匹配一对双引号包裹的字符串字面量，并捕获其中的内容作为候选类名。在 JSON 中转义后写作 ["\"([^\"]*)\""]。对应地：

• "text-red-500" → 捕获 text-red-500 参与补全与诊断；
• "flex items-center" → 一次捕获整个 flex items-center（Tailwind 会自动拆分）。

该模式在 Gleam 源码中能覆盖两类典型写法：

1. 普通字符串字面量——直接写在 .gleam 文件中、作为 CSS 类名使用的双引号字符串；
2. Lustre 视图模板——在 Lustre（Gleam 的声明式 UI 框架）中，class 等属性以字符串参数形式传入元素构建函数，这些实参同样以双引号字符串出现，因此同样能被该正则命中。

Gleam 官方文档指出：这套配置与 Lustre 视图模板配合时按字符串参数传类名即可生效，无需为组件写法做额外改造。classRegex 数组支持多条正则（依序尝试），若你的代码库存在多种传类名习惯，可在数组中追加更多精确模式（可参考同仓库 docs/src/languages/tailwindcss.md 中针对 JS/TS 写法 [cls|className]\s\:\=\s"([^"]*)" 的示例）。需要留意的是，过于宽泛的正则（如本例的"所有双引号字符串"）会令 Tailwind 对非类名文本（如普通提示文案）也进行类名语义分析，产生少量误报 lint；若介意，可将正则收窄到特定前缀或特定函数参数位置。

配置之外：Zed 如何驱动 tailwindcss-language-server

了解底层实现有助于排障。Zed 对 Tailwind 语言服务器的内建适配位于 crates/languages/src/tailwind.rs，其关键设计可从源码确认：

• 服务器程序来自 npm 包 @tailwindcss/language-server。若你在 $PATH 中已安装对应可执行文件，Zed 会优先复用（check_if_user_installed 分支）；否则走 LspInstaller 流程，通过内置的 Node 运行时动态安装到 Zed 的托管目录；
• 启动参数固定为二进制路径加 --stdio，即以标准输入输出通道与 Zed 通信；
• 服务器注册名为 tailwindcss-language-server，即你在 language_servers 数组中写的那个标识符。

另外，Zed 还注册了一个面向 CSS 文件本身的 tailwindcss-intellisense-css 服务器，用于在 .css 中支持 @apply、@layer、@theme 等 Tailwind 专属 at-rule（见 crates/languages/src/lib.rs#L255-L258）。它面向的是 CSS 语言模式，与本文针对 .gleam 文件的配置互不冲突，但如果你的项目同时希望在 CSS 侧获得完整 Tailwind IntelliSense，可在 languages.CSS.language_servers 中把默认的 vscode-css-language-server 替换为 tailwindcss-intellisense-css（参考 docs/src/languages/tailwindcss.md）。

验证与排查清单

配置完成后，建议按如下顺序自检：

1. 确认扩展就绪：确认 Gleam 扩展已安装（Zed 扩展面板中搜索 "Gleam"），并打开任意 .gleam 文件确认语法高亮与 gleam lsp 诊断正常；
2. 确认设置加载：在 settings.json 中检查 JSON 语法合法、字段嵌套层级正确（languages / Gleam / language_servers 与 lsp / tailwindcss-language-server / settings / experimental / classRegex 同级并列于顶层对象之下，不要错写成 lsp 嵌套进 languages）；
3. 确认服务器被启用：输入一个 Tailwind 工具类前缀（如 bg-、text-）验证补全是否弹出，或查看 Zed 语言服务器列表确认 tailwindcss-language-server 正在为 Gleam 运行；
4. 确认类名写法匹配正则：如果 Lustre 模板中以非字符串字面量（如变量、拼接表达式）传类名，该正则无法命中，需要把类名写成可直接匹配的双引号字符串字面量，或补充针对性的 classRegex 条目。

相关语言配置延伸

Gleam 在 BEAM 生态中与 Elixir、Erlang 关系密切，若你的项目同时包含这三种语言，可对照阅读同系列语言文档，其中 Elixir 扩展还额外支持 EEx/HEEx 模板的 Tailwind 补全：

• Elixir 语言支持文档
• Erlang 语言支持文档
• Tailwind CSS 语言支持总览

整体而言，为 Gleam 启用 Tailwind CSS 语言服务器本质上是在利用 Zed "语言 × 语言服务器"可插拔的派发模型：由 language_servers 决定把谁派给 Gleam，由 classRegex 决定在何处提取类名。理解这两层，你就能把同样的手法推广到任意 Zed 尚未默认覆盖的模板语言上。