1---
 2title: Tailwind CSS
 3description: "Configure Tailwind CSS language support in Zed, including language servers, formatting, and debugging."
 4---
 5
 6# Tailwind CSS
 7
 8Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
 9
10- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
11
12Languages which can be used with Tailwind CSS in Zed:
13
14- [Astro](./astro.md#using-the-tailwind-css-language-server-with-astro)
15- [CSS](./css.md)
16- [ERB](./ruby.md#using-the-tailwind-css-language-server-with-ruby)
17- [Gleam](./gleam.md)
18- [HEEx](./elixir.md#using-the-tailwind-css-language-server-with-heex)
19- [HTML](./html.md#using-the-tailwind-css-language-server-with-html)
20- [TypeScript](./typescript.md#using-the-tailwind-css-language-server-with-typescript)
21- [JavaScript](./javascript.md#using-the-tailwind-css-language-server-with-javascript)
22- [PHP](./php.md#using-the-tailwind-css-language-server-with-php)
23- [Svelte](./svelte.md#using-the-tailwind-css-language-server-with-svelte)
24- [Vue](./vue.md#using-the-tailwind-css-language-server-with-vue)
25
26## Configuration
27
28If 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`:
29
30```json [settings]
31{
32  "lsp": {
33    "tailwindcss-language-server": {
34      "settings": {
35        "classFunctions": ["cva", "cx"],
36        "experimental": {
37          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
38        }
39      }
40    }
41  }
42}
43```
44
45Refer to [the Tailwind CSS language server settings docs](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) for more information.
46
47### Using Tailwind CSS Mode in CSS Files
48
49Zed 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 `@theme`.
50Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > CSS, or add to your settings file:
51
52```json [settings]
53{
54  "languages": {
55    "CSS": {
56      "language_servers": [
57        "tailwindcss-intellisense-css",
58        "!vscode-css-language-server",
59        "..."
60      ]
61    }
62  }
63}
64```
65
66The `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.
67
68### Prettier Plugin
69
70Zed 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:
71
72```json
73// .prettierrc
74{
75  "plugins": ["prettier-plugin-tailwindcss"]
76}
77```