zed/docs/src/languages/tailwindcss.md
morgankrey 6daa541e77
docs: Apply documentation standards across all docs (#49177)
## Summary

Comprehensive remediation of 146 documentation files to align with Zed's
documentation conventions and brand voice guidelines.

## Changes

### YAML Frontmatter
- Added `title` and `description` frontmatter to all docs missing it

### Settings UI Pattern
- Updated 48+ files to show Settings Editor before JSON examples
- Pattern: `Configure X in Settings ({#kb zed::OpenSettings}), or add to
your settings file:`
- Added `([how to edit](./configuring-zed.md#settings-files))` links for
JSON-only settings

### Brand Voice Fixes
- Removed exclamation points (command-palette, key-bindings, repl,
privacy-and-security, etc.)
- Simplified em dash chains to parentheticals (environment,
troubleshooting, agent-panel, etc.)
- Fixed marketing language (yarn.md intro, development/linux.md)

### Terminology Alignment
- `settings UI` -> `Settings Editor`
- `sidebar` -> specific panel names (Project Panel, Collab Panel)
- `directory` -> `folder` in non-technical contexts
- `workspace` -> `project` in non-LSP contexts
- `Command Palette` -> `command palette` (lowercase)

### Callout Standardization
- Converted various callout formats to standard `> **Note:**` pattern

## Related

Depends on conventions established in #49176.

Release Notes:

- N/A
2026-02-17 20:58:17 -06:00

2.8 KiB

title description
Tailwind CSS Configure Tailwind CSS language support in Zed, including language servers, formatting, and debugging.

Tailwind CSS

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

Languages which can be used with Tailwind CSS in Zed:

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.

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 @theme. Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > CSS, or add to your settings file:

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