Tailwind CSS

Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.

• Language Server: tailwindlabs/tailwindcss-intellisense

Languages which can be used with Tailwind CSS in Zed:

• Astro
• CSS
• ERB
• Gleam
• HEEx
• HTML
• TypeScript
• JavaScript
• PHP
• Svelte
• Vue

Configuration

If by default the language server isn't enough to make Tailwind work for a given language, you can configure the language server settings and add them to the lsp section of your settings.json:

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

Refer to the Tailwind CSS language server settings docs for more information.

Prettier Plugin

Zed supports Prettier out of the box, which means that if you have the Tailwind CSS Prettier plugin installed, adding it to your Prettier configuration will make it work automatically:

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