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/).
1.4 KiB
1.4 KiB
Tailwind CSS
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
- Language Server: tailwindlabs/tailwindcss-intellisense
Configuration
To configure the Tailwind CSS language server, refer to the extension settings and add them to the lsp section of your settings.json:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"classFunctions": ["cva", "cx"],
"experimental": {
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
}
}
}
}
}
Languages which can be used with Tailwind CSS in Zed:
Prettier Plugin
Zed supports Prettier out of the box, which means that if you have the Tailwind CSS Prettier plugin installed, adding it to your Prettier configuration will make it work automatically:
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}