1# Svelte
  2
  3Svelte support is available through the [Svelte extension](https://github.com/zed-extensions/svelte).
  4
  5- Tree-sitter: [tree-sitter-grammars/tree-sitter-svelte](https://github.com/tree-sitter-grammars/tree-sitter-svelte)
  6- Language Server: [sveltejs/language-tools](https://github.com/sveltejs/language-tools)
  7
  8## Extra theme styling configuration
  9
 10You can modify how certain styles, such as directives and modifiers, appear in attributes:
 11
 12```json [settings]
 13"syntax": {
 14  // Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
 15  "attribute.function": {
 16    "color": "#ff0000"
 17  },
 18  // Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
 19  "attribute.special": {
 20    "color": "#00ff00"
 21  }
 22}
 23```
 24
 25## Inlay Hints
 26
 27When inlay hints is enabled in Zed, to make the language server send them back, Zed sets the following initialization options:
 28
 29```json [settings]
 30"inlayHints": {
 31  "parameterNames": {
 32    "enabled": "all",
 33    "suppressWhenArgumentMatchesName": false
 34  },
 35  "parameterTypes": {
 36    "enabled": true
 37  },
 38  "variableTypes": {
 39    "enabled": true,
 40    "suppressWhenTypeMatchesName": false
 41  },
 42  "propertyDeclarationTypes": {
 43    "enabled": true
 44  },
 45  "functionLikeReturnTypes": {
 46    "enabled": true
 47  },
 48  "enumMemberValues": {
 49    "enabled": true
 50  }
 51}
 52```
 53
 54To override these settings, use the following:
 55
 56```json [settings]
 57"lsp": {
 58  "svelte-language-server": {
 59    "initialization_options": {
 60      "configuration": {
 61        "typescript": {
 62          // ......
 63        },
 64        "javascript": {
 65          // ......
 66        }
 67      }
 68    }
 69  }
 70}
 71```
 72
 73See [the TypeScript language server `package.json`](https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json) for more information.
 74
 75## Using the Tailwind CSS Language Server with Svelte
 76
 77To 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 Svelte 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`:
 78
 79```json [settings]
 80{
 81  "lsp": {
 82    "tailwindcss-language-server": {
 83      "settings": {
 84        "includeLanguages": {
 85          "svelte": "html"
 86        },
 87        "experimental": {
 88          "classRegex": [
 89            "class=\"([^\"]*)\"",
 90            "class='([^']*)'",
 91            "class:\\s*([^\\s{]+)",
 92            "\\{\\s*class:\\s*\"([^\"]*)\"",
 93            "\\{\\s*class:\\s*'([^']*)'"
 94          ]
 95        }
 96      }
 97    }
 98  }
 99}
100```
101
102With these settings, you will get completions for Tailwind CSS classes in Svelte files. Examples:
103
104```svelte
105<!-- Standard class attribute -->
106<div class="flex items-center <completion here>">
107  <p class="text-lg font-bold <completion here>">Hello World</p>
108</div>
109
110<!-- Class directive -->
111<button class:active="bg-blue-500 <completion here>">Click me</button>
112
113<!-- Expression -->
114<div class={active ? "flex <completion here>" : "hidden <completion here>"}>
115  Content
116</div>
117```