tailwindcss.md

Tailwind CSS

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

Configuration

To configure the Tailwind CSS language server, refer to the extension 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\"([^\"]*)"]
        }
      }
    }
  }
}

Languages which can be used with Tailwind CSS in Zed:

Using Tailwind CSS Mode in CSS Files

Zed includes support for the Tailwind CSS language mode, which provides full CSS IntelliSense support even when using Tailwind-specific at-rules like @apply, @layer, and @screen.

To use the Tailwind CSS language mode for CSS files, add the following to languages section of your settings.json:

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

The tailwindcss-intellisense-css language server serves as an alternative to the default CSS language server, maintaining all standard CSS IntelliSense features while adding support for Tailwind-specific syntax.

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"]
}