5f1fe654b2
## Context - Mention support for EEx templates - Rearranges a few sections (HEEx, `elixir-ls` workspace configuration) - Corrects naming of HEEx and mention that language server configurations also need to be applied to it (and EEx) - Removes unnecessary instructions for how to install `elixir-ls` - the extension has been able to do this on its own for a long time; additionally, these instructions were very macOS-specific - Demonstrates how to pass initialization options to `next-ls` and workspace configuration options to `expert` - Rewords the formatting with Mix section - all language servers already use Mix for code formatting, so these instructions are only useful if you work _without_ a language server - Adjust Tailwind LSP configuration instructions ## How to Review Check for typos and that the wording/structure of the new/reworded sections is also good. Release Notes: - N/A --------- Co-authored-by: Finn Evers <finn.evers@outlook.de>
2.8 KiB
| title | description |
|---|---|
| Tailwind CSS | Configure Tailwind CSS language support in Zed, including language servers, formatting, and debugging. |
Tailwind CSS
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
- Language Server: tailwindlabs/tailwindcss-intellisense
Languages which can be used with Tailwind CSS in Zed:
Configuration
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:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"classFunctions": ["cva", "cx"],
"experimental": {
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
}
}
}
}
}
Refer to the Tailwind CSS language server settings docs for more information.
Using Tailwind CSS Mode in CSS Files
Zed includes support for the Tailwind CSS language mode, which provides full CSS IntelliSense support even when using Tailwind-specific at-rules like @apply, @layer, and @theme.
Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > CSS, or add to your settings file:
{
"languages": {
"CSS": {
"language_servers": [
"tailwindcss-intellisense-css",
"!vscode-css-language-server",
"..."
]
}
}
}
The tailwindcss-intellisense-css language server serves as an alternative to the default CSS language server, maintaining all standard CSS IntelliSense features while adding support for Tailwind-specific syntax.
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"]
}