Detailed changes
@@ -175,6 +175,34 @@ You can configure ESLint's `workingDirectory` setting:
}
```
+## Using the Tailwind CSS Language Server with JavaScript
+
+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 vanilla JavaScript files (`.js`), you can customize the `classRegex` field under it in your `settings.json`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "experimental": {
+ "classRegex": [
+ "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
+ "\\.setAttributeNS\\(.*,\\s*['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
+ "\\.setAttribute\\(['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
+ "\\.classList\\.add\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.remove\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.toggle\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.contains\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.replace\\(\\s*['\"]([^'\"]*)['\"]",
+ "\\.classList\\.replace\\([^,)]+,\\s*['\"]([^'\"]*)['\"]"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
## Debugging
Zed supports debugging JavaScript code out of the box with `vscode-js-debug`.
@@ -186,7 +214,7 @@ The following can be debugged without writing additional configuration:
Run {#action debugger::Start} ({#kb debugger::Start}) to see a contextual list of these predefined debug tasks.
> **Note:** Bun test is automatically detected when `@types/bun` is present in `package.json`.
->
+
> **Note:** Node test is automatically detected when `@types/node` is present in `package.json` (requires Node.js 20+).
As for all languages, configurations from `.vscode/launch.json` are also available for debugging in Zed.
@@ -258,17 +258,10 @@ To enable Steep, add `\"steep\"` to the `language_servers` list for Ruby in your
## Using the Tailwind CSS Language Server with Ruby
-It's possible to use the [Tailwind CSS Language Server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) in Ruby and ERB files.
-
-In order to do that, you need to configure the language server so that it knows about where to look for CSS classes in Ruby/ERB files by adding the following to your `settings.json`:
+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 Ruby/ERB 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]
{
- "languages": {
- "Ruby": {
- "language_servers": ["tailwindcss-language-server", "..."]
- }
- },
"lsp": {
"tailwindcss-language-server": {
"settings": {
@@ -281,7 +274,7 @@ In order to do that, you need to configure the language server so that it knows
}
```
-With these settings you will get completions for Tailwind CSS classes in HTML attributes inside ERB files and inside Ruby/ERB strings that are coming after a `class:` key. Examples:
+With these settings, you will get completions for Tailwind CSS classes in HTML attributes inside ERB files and inside Ruby/ERB strings that are coming after a `class:` key. Examples:
```rb
# Ruby file:
@@ -4,9 +4,23 @@ Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previ
- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
+Languages which can be used with Tailwind CSS in Zed:
+
+- [Astro](./astro.md)
+- [CSS](./css.md)
+- [ERB](./ruby.md)
+- [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)
+
## Configuration
-To configure the Tailwind CSS language server, refer [to the extension settings](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) and add them to the `lsp` section of your `settings.json`:
+If by default the language server isn't enough to make Tailwind work for a given language, you can configure the language server settings and add them to the `lsp` section of your `settings.json`:
```json [settings]
{
@@ -23,19 +37,7 @@ To configure the Tailwind CSS language server, refer [to the extension settings]
}
```
-Languages which can be used with Tailwind CSS in Zed:
-
-- [Astro](./astro.md)
-- [CSS](./css.md)
-- [ERB](./ruby.md)
-- [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)
+Refer to [the Tailwind CSS language server settings docs](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) for more information.
### Prettier Plugin
@@ -45,6 +45,34 @@ Prettier will also be used for TypeScript files by default. To disable this:
}
```
+## Using the Tailwind CSS Language Server with TypeScript
+
+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 vanilla TypeScript files (`.ts`), you can customize the `classRegex` field under it in your `settings.json`:
+
+```json [settings]
+{
+ "lsp": {
+ "tailwindcss-language-server": {
+ "settings": {
+ "experimental": {
+ "classRegex": [
+ "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
+ "\\.setAttributeNS\\(.*,\\s*['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
+ "\\.setAttribute\\(['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
+ "\\.classList\\.add\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.remove\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.toggle\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.contains\\(['\"]([^'\"]*)['\"]",
+ "\\.classList\\.replace\\(\\s*['\"]([^'\"]*)['\"]",
+ "\\.classList\\.replace\\([^,)]+,\\s*['\"]([^'\"]*)['\"]"
+ ]
+ }
+ }
+ }
+ }
+}
+```
+
## Large projects
`vtsls` may run out of memory on very large projects. We default the limit to 8092 (8 GiB) vs. the default of 3072 but this may not be sufficient for you:
@@ -167,7 +195,7 @@ The following can be debugged without writing additional configuration:
Run {#action debugger::Start} ({#kb debugger::Start}) to see a contextual list of these predefined debug tasks.
> **Note:** Bun test is automatically detected when `@types/bun` is present in `package.json`.
->
+
> **Note:** Node test is automatically detected when `@types/node` is present in `package.json` (requires Node.js 20+).
As for all languages, configurations from `.vscode/launch.json` are also available for debugging in Zed.