Document how to configure the Tailwind CSS language server for the
following languages:
- Astro
- Elixir
- HTML
- PHP
- Svelte
- Vue
Refs: #43969
Release Notes:
- N/A
---------
Co-authored-by: Kunall Banerjee <hey@kimchiii.space>
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>
Currently, Zed does not provide suggestions and validations for Gleam,
as it is only available for languages specified in `tailwind.rs`. This
pull-request adds Gleam to that list of languages.
After this, if Tailwind is configured to work with Gleam, suggestions
and validation appear correctly.
Even after this change, Tailwind will not be able to detect and give
suggestions in Gleam directly. Below is the config required for Tailwind
classes to be detected in all Gleam strings.
<details><summary>Zed Config for Tailwind detection in Gleam</summary>
<p>
```
{
"languages": {
"Gleam": {
"language_servers": [
"gleam",
"tailwindcss-language-server"
]
}
},
"lsp": {
"tailwindcss-language-server": {
"settings": {
"experimental": {
"classRegex": [
"\"([^\"]*)\""
]
}
}
}
}
}
```
The `classRegex` will match all Gleam strings, making it work seamlessly
with Lustre templates and plain string literals.
</p>
</details>
Release Notes:
- Added support for Tailwind suggestions and validations for the [Gleam
programming language](https://gleam.run/).
Closes#37028
I noticed many projects use Tailwind in plain TypeScript (.ts) files, so
it makes sense to support them out of the box, alongside .js and .tsx
files we already handle. For example, see
[supabase](https://github.com/supabase/supabase/blob/master/packages/ui/src/lib/theme/defaultTheme.ts).
Note: You’ll still need to add `"classFunctions": ["cva", "cx"],`
manually for Tailwind completions to work in `cva` type methods. This is
because you don’t want completions on every string, only in specific
methods or regex matches. This is documented.
Release Notes:
- Added out-of-the-box support for Tailwind completions in `.ts` files.
