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
45IntelliSense support even when using Tailwind-specific at-rules like `@apply`,
46`@layer`, and `@theme`.
47
48To use the Tailwind CSS language mode for CSS files, add the following to
49`languages` section of your `settings.json`:
50
51```json [settings]
52{
53  "languages": {
54    "CSS": {
55      "language_servers": [
56        "tailwindcss-intellisense-css",
57        "!vscode-css-language-server",
58        "..."
59      ]
60    }
61  }
62}
63```
64
65The `tailwindcss-intellisense-css` language server serves as an alternative to
66the default CSS language server, maintaining all standard CSS IntelliSense
67features while adding support for Tailwind-specific syntax.
68
69### Prettier Plugin
70
71Zed 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:
72
73```json [settings]
74// .prettierrc
75{
76  "plugins": ["prettier-plugin-tailwindcss"]
77}
78```