Home Explore Blog CI



zed

docs/src/languages/tailwindcss.md
9c80055d7e5e24e6f9782cf079a669c1e1b3510e117a411d0000000300000399
# Tailwind CSS

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

- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)

## Configuration

<!--
TBD: Document Tailwind CSS Configuration
-->

Languages which can be used with Tailwind CSS in Zed:

- [Astro](./astro.md)
- [CSS](./css.md)
- [ERB](./ruby.md)
- [HEEx](./elixir.md#heex)
- [HTML](./html.md)
- [TypeScript](./typescript.md)
- [JavaScript](./javascript.md)
- [PHP](./php.md)
- [Svelte](./svelte.md)
- [Vue](./vue.md)

### Prettier Plugin

Zed supports Prettier out of the box, which means that if you have the [Tailwind CSS Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) installed, adding it to your Prettier configuration will make it work automatically:

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

Chunks
a4700f5f (1st chunk of `docs/src/languages/tailwindcss.md`)
Title: Tailwind CSS Support in Zed
Summary
Zed provides built-in support for Tailwind CSS, including autocomplete, linting, and hover previews, powered by the tailwindcss-intellisense language server. It supports Tailwind CSS in various languages such as Astro, CSS, HTML, TypeScript, JavaScript, PHP, Svelte, and Vue. Zed also supports the Tailwind CSS Prettier plugin for automatic class sorting when formatting.