docs: Add Tailwind configuration section for JavaScript/TypeScript (#45057)

Addresses some tasks in #43969. Namely adding TailwindCSS documentation
for the following languages: HTML, JavaScript and Typescript.

**Some Notes**
- Maybe the additional information in the HTML section is unnecessary,
unsure open to suggestions.
- I tried utilizing capturing groups with alternatives like
`\\.(add|remove|toggle|contains)` but this didn't seem to work, so I was
forced to use multiple lines.

Release Notes:

- N/A

---------

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
This commit is contained in:
André ErikssonandDanilo Leal authored and GitHub committed 2025-12-17 14:16:37 +00:00
1 parent 28c28b1d8e
commit f9823eb6bd
4 files changed
+76 -25

No files matched your search

+29 -1
View File
@@ -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.