1---
 2title: Astro
 3description: "Configure Astro language support in Zed, including language servers, formatting, and debugging."
 4---
 5
 6# Astro
 7
 8Astro support is available through the [Astro extension](https://github.com/zed-extensions/astro).
 9
10- Tree-sitter: [virchau13/tree-sitter-astro](https://github.com/virchau13/tree-sitter-astro)
11- Language Server: [withastro/language-tools](https://github.com/withastro/astro/tree/main/packages/language-tools/language-server)
12
13## Using the Tailwind CSS Language Server with Astro
14
15To get all the features (autocomplete, linting, etc.) from the [Tailwind CSS language server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) in Astro files, you need to configure the language server so that it knows about where to look for CSS classes by adding the following to your `settings.json`:
16
17```json [settings]
18{
19  "lsp": {
20    "tailwindcss-language-server": {
21      "settings": {
22        "includeLanguages": {
23          "astro": "html"
24        },
25        "experimental": {
26          "classRegex": [
27            "class=\"([^\"]*)\"",
28            "class='([^']*)'",
29            "class:list=\"{([^}]*)}\"",
30            "class:list='{([^}]*)}'"
31          ]
32        }
33      }
34    }
35  }
36}
37```
38
39With these settings, you will get completions for Tailwind CSS classes in Astro template files. Examples:
40
41```astro
42---
43const active = true;
44---
45
46<!-- Standard class attribute -->
47<div class="flex items-center <completion here>">
48  <p class="text-lg font-bold <completion here>">Hello World</p>
49</div>
50
51<!-- class:list directive -->
52<div class:list={["flex", "items-center", "<completion here>"]}>
53  Content
54</div>
55
56<!-- Conditional classes -->
57<div class:list={{ "flex <completion here>": active, "hidden <completion here>": !active }}>
58  Content
59</div>
60```