1# Vue
 2
 3Vue support is available through the [Vue extension](https://github.com/zed-extensions/vue).
 4
 5- Tree-sitter: [tree-sitter-grammars/tree-sitter-vue](https://github.com/tree-sitter-grammars/tree-sitter-vue)
 6- Language Server: [vuejs/language-tools/](https://github.com/vuejs/language-tools/)
 7
 8## Using the Tailwind CSS Language Server with Vue
 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 Vue 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          "vue": "html"
19        },
20        "experimental": {
21          "classRegex": [
22            "class=\"([^\"]*)\"",
23            "class='([^']*)'",
24            ":class=\"([^\"]*)\"",
25            ":class='([^']*)'"
26          ]
27        }
28      }
29    }
30  }
31}
32```
33
34With these settings, you will get completions for Tailwind CSS classes in Vue template files. Examples:
35
36```vue
37<template>
38  <!-- Static class attribute -->
39  <div class="flex items-center <completion here>">
40    <p class="text-lg font-bold <completion here>">Hello World</p>
41  </div>
42
43  <!-- Dynamic class binding -->
44  <div
45    :class="
46      active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
47    "
48  >
49    Content
50  </div>
51
52  <!-- Array syntax -->
53  <div :class="['flex', 'items-center', '<completion here>']">Content</div>
54
55  <!-- Object syntax -->
56  <div
57    :class="{
58      'flex <completion here>': isFlex,
59      'block <completion here>': isBlock,
60    }"
61  >
62    Content
63  </div>
64</template>
65```