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### Using Tailwind CSS Mode in CSS Files
43
44Zed 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`.
45
46To use the Tailwind CSS language mode for CSS files, add the following to `languages` section of your `settings.json`:
47
48```json [settings]
49{
50  "languages": {
51    "CSS": {
52      "language_servers": [
53        "tailwindcss-intellisense-css",
54        "!vscode-css-language-server",
55        "..."
56      ]
57    }
58  }
59}
60```
61
62The `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.
63
64### Prettier Plugin
65
66Zed 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:
67
68```json [settings]
69// .prettierrc
70{
71  "plugins": ["prettier-plugin-tailwindcss"]
72}
73```