1# Astro
 2
 3Astro support is available through the [Astro extension](https://github.com/zed-extensions/astro).
 4
 5- Tree-sitter: [virchau13/tree-sitter-astro](https://github.com/virchau13/tree-sitter-astro)
 6- Language Server: [withastro/language-tools](https://github.com/withastro/astro/tree/main/packages/language-tools/language-server)
 7
 8## Using the Tailwind CSS Language Server with Astro
 9
10To 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`:
11
12```json [settings]
13{
14  "lsp": {
15    "tailwindcss-language-server": {
16      "settings": {
17        "includeLanguages": {
18          "astro": "html"
19        },
20        "experimental": {
21          "classRegex": [
22            "class=\"([^\"]*)\"",
23            "class='([^']*)'",
24            "class:list=\"{([^}]*)}\"",
25            "class:list='{([^}]*)}'"
26          ]
27        }
28      }
29    }
30  }
31}
32```
33
34With these settings, you will get completions for Tailwind CSS classes in Astro template files. Examples:
35
36```astro
37---
38const active = true;
39---
40
41<!-- Standard class attribute -->
42<div class="flex items-center <completion here>">
43  <p class="text-lg font-bold <completion here>">Hello World</p>
44</div>
45
46<!-- class:list directive -->
47<div class:list={["flex", "items-center", "<completion here>"]}>
48  Content
49</div>
50
51<!-- Conditional classes -->
52<div class:list={{ "flex <completion here>": active, "hidden <completion here>": !active }}>
53  Content
54</div>
55```