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
 7## Configuration
 8
 9To configure the Tailwind CSS language server, refer [to the extension settings](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) and add them to the `lsp` section of your `settings.json`:
10
11```json [settings]
12{
13  "lsp": {
14    "tailwindcss-language-server": {
15      "settings": {
16        "classFunctions": ["cva", "cx"],
17        "experimental": {
18          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
19        }
20      }
21    }
22  }
23}
24```
25
26Languages which can be used with Tailwind CSS in Zed:
27
28- [Astro](./astro.md)
29- [CSS](./css.md)
30- [ERB](./ruby.md)
31- [Gleam](./gleam.md)
32- [HEEx](./elixir.md#heex)
33- [HTML](./html.md)
34- [TypeScript](./typescript.md)
35- [JavaScript](./javascript.md)
36- [PHP](./php.md)
37- [Svelte](./svelte.md)
38- [Vue](./vue.md)
39
40### Using Tailwind CSS Mode in CSS Files
41
42Zed 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`.
43
44To use the Tailwind CSS language mode for CSS files, add the following to `languages` section of your `settings.json`:
45
46```json [settings]
47{
48  "languages": {
49    "CSS": {
50      "language_servers": [
51        "tailwindcss-intellisense-css",
52        "!vscode-css-language-server",
53        "..."
54      ]
55    }
56  }
57}
58```
59
60The `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.
61
62### Prettier Plugin
63
64Zed 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:
65
66```json [settings]
67// .prettierrc
68{
69  "plugins": ["prettier-plugin-tailwindcss"]
70}
71```