tailwindcss.md

 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```jsonc
12{
13  "lsp": {
14    "tailwindcss-language-server": {
15      "settings": {
16        "experimental": {
17          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"],
18        },
19      },
20    },
21  },
22}
23```
24
25Languages which can be used with Tailwind CSS in Zed:
26
27- [Astro](./astro.md)
28- [CSS](./css.md)
29- [ERB](./ruby.md)
30- [HEEx](./elixir.md#heex)
31- [HTML](./html.md)
32- [TypeScript](./typescript.md)
33- [JavaScript](./javascript.md)
34- [PHP](./php.md)
35- [Svelte](./svelte.md)
36- [Vue](./vue.md)
37
38### Prettier Plugin
39
40Zed 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:
41
42```json
43// .prettierrc
44{
45  "plugins": ["prettier-plugin-tailwindcss"]
46}
47```