1# Tailwind CSS
 2
 3Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
 4
 5- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
 6
 7Languages which can be used with Tailwind CSS in Zed:
 8
 9- [Astro](./astro.md)
10- [CSS](./css.md)
11- [ERB](./ruby.md)
12- [Gleam](./gleam.md)
13- [HEEx](./elixir.md#heex)
14- [HTML](./html.md)
15- [TypeScript](./typescript.md)
16- [JavaScript](./javascript.md)
17- [PHP](./php.md)
18- [Svelte](./svelte.md)
19- [Vue](./vue.md)
20
21## Configuration
22
23If 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`:
24
25```json [settings]
26{
27  "lsp": {
28    "tailwindcss-language-server": {
29      "settings": {
30        "classFunctions": ["cva", "cx"],
31        "experimental": {
32          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
33        }
34      }
35    }
36  }
37}
38```
39
40Refer to [the Tailwind CSS language server settings docs](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) for more information.
41
42### Prettier Plugin
43
44Zed 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:
45
46```json [settings]
47// .prettierrc
48{
49  "plugins": ["prettier-plugin-tailwindcss"]
50}
51```