Tailwind CSS | Zed Code Editor Documentation
Description: Learn how to use and customize Zed, the fast, collaborative code editor. Official docs on features, configuration, AI tools, and workflows.

# Tailwind CSS

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

- Language Server: tailwindlabs/tailwindcss-intellisense

## 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:

- Astro
- CSS
- ERB
- HEEx
- HTML
- TypeScript
- JavaScript
- PHP
- Svelte
- Vue

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