第115章 Tailwind CSS 支持

Zed 内置了 Tailwind CSS 的自动补全、lint 和悬停预览支持。

• Language Server：tailwindlabs/tailwindcss-intellisense

Zed 中可与 Tailwind CSS 配合使用的语言：

• Astro
• CSS
• ERB
• Gleam
• Go (Templ)
• HEEx
• HTML
• TypeScript
• JavaScript
• PHP
• Svelte
• Vue

配置

如果默认的语言服务器设置无法让 Tailwind 在某种语言中正常工作，你可以配置语言服务器设置，并将其添加到 settings.json 的 lsp 部分：

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classFunctions": ["cva", "cx"],
        "experimental": {
          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
        }
      }
    }
  }
}

有关更多信息，请参考 Tailwind CSS 语言服务器设置文档。

在 CSS 文件中使用 Tailwind CSS 模式

Zed 支持 Tailwind CSS 语言模式，即使使用 Tailwind 特定的 at-rules（如 @apply、@layer 和 @theme），也能提供完整的 CSS IntelliSense 支持。 请在设置（{#kb zed::OpenSettings}）中的 语言 > CSS 下配置语言服务器，或在你的设置文件中添加以下内容：

{
  "languages": {
    "CSS": {
      "language_servers": [
        "tailwindcss-intellisense-css",
        "!vscode-css-language-server",
        "..."
      ]
    }
  }
}

tailwindcss-intellisense-css 语言服务器作为默认 CSS 语言服务器的替代方案，在保留所有标准 CSS IntelliSense 功能的同时，增加了对 Tailwind 特定语法的支持。

Prettier 插件

Zed 原生支持 Prettier。这意味着，如果你安装了 Tailwind CSS Prettier 插件，只需将其添加到 Prettier 配置中即可自动生效：

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}