Detailed changes
@@ -5,6 +5,51 @@ Astro support is available through the [Astro extension](https://github.com/zed-
- Tree-sitter: [virchau13/tree-sitter-astro](https://github.com/virchau13/tree-sitter-astro)
- Language Server: [withastro/language-tools](https://github.com/withastro/astro/tree/main/packages/language-tools/language-server)
-<!--
-TBD: Documentation Astro usage / configuration
--->
+## Using the Tailwind CSS Language Server with Astro
+
+To 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "astro": "html"
+ },
+ "experimental": {
+ "classRegex": [
+ "class=\"([^\"]*)\"",
+ "class='([^']*)'",
+ "class:list=\"{([^}]*)}\"",
+ "class:list='{([^}]*)}'"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in Astro template files. Examples:
+
+```astro
+---
+const active = true;
+---
+
+<!-- Standard class attribute -->
+<div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+</div>
+
+<!-- class:list directive -->
+<div class:list={["flex", "items-center", "<completion here>"]}>
+ Content
+</div>
+
+<!-- Conditional classes -->
+<div class:list={{ "flex <completion here>": active, "hidden <completion here>": !active }}>
+ Content
+</div>
+```
@@ -123,3 +123,43 @@ See [ElixirLS configuration settings](https://github.com/elixir-lsp/elixir-ls#el
Zed also supports HEEx templates. HEEx is a mix of [EEx](https://hexdocs.pm/eex/1.12.3/EEx.html) (Embedded Elixir) and HTML, and is used in Phoenix LiveView applications.
- Tree-sitter: [phoenixframework/tree-sitter-heex](https://github.com/phoenixframework/tree-sitter-heex)
+
+#### Using the Tailwind CSS Language Server with HEEx
+
+To 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 HEEx 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "phoenix-heex": "html"
+ },
+ "experimental": {
+ "classRegex": ["class=\"([^\"]*)\"", "class='([^']*)'"]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in HEEx template files. Examples:
+
+```heex
+<%!-- Standard class attribute --%>
+<div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+</div>
+
+<%!-- With Elixir expression --%>
+<div class={"flex #{@custom_class} <completion here>"}>
+ Content
+</div>
+
+<%!-- With Phoenix function --%>
+<div class={class_list(["flex", "items-center", "<completion here>"])}>
+ Content
+</div>
+```
@@ -64,6 +64,32 @@ You can customize various [formatting options](https://code.visualstudio.com/doc
}
```
+## Using the Tailwind CSS Language Server with HTML
+
+To 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 HTML 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "experimental": {
+ "classRegex": ["class=\"([^\"]*)\""]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in HTML `class` attributes. Examples:
+
+```html
+<div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+</div>
+```
+
## See also
- [CSS](./css.md)
@@ -149,8 +149,80 @@ The PHP extension provides a debug adapter for PHP via Xdebug. There are several
These are common troubleshooting tips, in case you run into issues:
-- Ensure that you have Xdebug installed for the version of PHP you’re running.
+- Ensure that you have Xdebug installed for the version of PHP you're running.
- Ensure that Xdebug is configured to run in `debug` mode.
- Ensure that Xdebug is actually starting a debugging session.
- Ensure that the host and port matches between Xdebug and Zed.
-- Look at the diagnostics log by using the `xdebug_info()` function in the page you’re trying to debug.
+- Look at the diagnostics log by using the `xdebug_info()` function in the page you're trying to debug.
+
+## Using the Tailwind CSS Language Server with PHP
+
+To 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 PHP 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "php": "html"
+ },
+ "experimental": {
+ "classRegex": [
+ "class=\"([^\"]*)\"",
+ "class='([^']*)'",
+ "class=\\\"([^\\\"]*)\\\""
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in HTML attributes inside PHP files. Examples:
+
+```php
+<?php
+// PHP file with HTML:
+?>
+<div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+</div>
+```
+
+### Laravel/Blade
+
+For Laravel/Blade files, you may need additional configuration to handle Blade directives:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "php": "html",
+ "blade": "html"
+ },
+ "experimental": {
+ "classRegex": [
+ "class=\"([^\"]*)\"",
+ "class='([^']*)'",
+ "class=\\\"([^\\\"]*)\\\"",
+ "@class\\(\\[([^\\]]*)\\]\\)"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
+This will also provide completions in Blade directives like:
+
+```blade
+{{-- Blade file --}}
+<div class="flex {{ $customClass }} <completion here>">
+ @class(['flex', 'items-center', '<completion here>'])
+</div>
+```
@@ -71,3 +71,47 @@ To override these settings, use the following:
```
See [the TypeScript language server `package.json`](https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json) for more information.
+
+## Using the Tailwind CSS Language Server with Svelte
+
+To 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "svelte": "html"
+ },
+ "experimental": {
+ "classRegex": [
+ "class=\"([^\"]*)\"",
+ "class='([^']*)'",
+ "class:\\s*([^\\s{]+)",
+ "\\{\\s*class:\\s*\"([^\"]*)\"",
+ "\\{\\s*class:\\s*'([^']*)'"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in Svelte files. Examples:
+
+```svelte
+<!-- Standard class attribute -->
+<div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+</div>
+
+<!-- Class directive -->
+<button class:active="bg-blue-500 <completion here>">Click me</button>
+
+<!-- Expression -->
+<div class={active ? "flex <completion here>" : "hidden <completion here>"}>
+ Content
+</div>
+```
@@ -6,17 +6,17 @@ Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previ
Languages which can be used with Tailwind CSS in Zed:
-- [Astro](./astro.md)
+- [Astro](./astro.md#using-the-tailwind-css-language-server-with-astro)
- [CSS](./css.md)
-- [ERB](./ruby.md)
+- [ERB](./ruby.md#using-the-tailwind-css-language-server-with-ruby)
- [Gleam](./gleam.md)
-- [HEEx](./elixir.md#heex)
-- [HTML](./html.md)
-- [TypeScript](./typescript.md)
-- [JavaScript](./javascript.md)
-- [PHP](./php.md)
-- [Svelte](./svelte.md)
-- [Vue](./vue.md)
+- [HEEx](./elixir.md#using-the-tailwind-css-language-server-with-heex)
+- [HTML](./html.md#using-the-tailwind-css-language-server-with-html)
+- [TypeScript](./typescript.md#using-the-tailwind-css-language-server-with-typescript)
+- [JavaScript](./javascript.md#using-the-tailwind-css-language-server-with-javascript)
+- [PHP](./php.md#using-the-tailwind-css-language-server-with-php)
+- [Svelte](./svelte.md#using-the-tailwind-css-language-server-with-svelte)
+- [Vue](./vue.md#using-the-tailwind-css-language-server-with-vue)
## Configuration
@@ -4,3 +4,62 @@ Vue support is available through the [Vue extension](https://github.com/zed-exte
- Tree-sitter: [tree-sitter-grammars/tree-sitter-vue](https://github.com/tree-sitter-grammars/tree-sitter-vue)
- Language Server: [vuejs/language-tools/](https://github.com/vuejs/language-tools/)
+
+## Using the Tailwind CSS Language Server with Vue
+
+To 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`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "includeLanguages": {
+ "vue": "html"
+ },
+ "experimental": {
+ "classRegex": [
+ "class=\"([^\"]*)\"",
+ "class='([^']*)'",
+ ":class=\"([^\"]*)\"",
+ ":class='([^']*)'"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
+With these settings, you will get completions for Tailwind CSS classes in Vue template files. Examples:
+
+```vue
+<template>
+ <!-- Static class attribute -->
+ <div class="flex items-center <completion here>">
+ <p class="text-lg font-bold <completion here>">Hello World</p>
+ </div>
+
+ <!-- Dynamic class binding -->
+ <div
+ :class="
+ active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
+ "
+ >
+ Content
+ </div>
+
+ <!-- Array syntax -->
+ <div :class="['flex', 'items-center', '<completion here>']">Content</div>
+
+ <!-- Object syntax -->
+ <div
+ :class="{
+ 'flex <completion here>': isFlex,
+ 'block <completion here>': isBlock,
+ }"
+ >
+ Content
+ </div>
+</template>
+```