zed icon indicating copy to clipboard operation
zed copied to clipboard

TailwindCSS support in rust files

Open highjeans opened this issue 1 year ago • 1 comments

Check for existing issues

  • [X] Completed

Describe the feature

I am currently implementing a website using the Leptos framework in rust. As a developer, I would like to have autocompletion support for TailwindCSS classes, but Zed seems to not allow this. The same lsp is used by VSCode, and with a few settings autocompletion for TailwindCSS works great, but I would like to see the same/similar thing in Zed. I have set the below in my settings.json:

"lsp": {
    "tailwindcss-language-server": {
        "settings": {
            "includeLanguages": {
                "rust": "html",
                "*.rs": "html"
            }
        }
    }
}

the similar is set in vscode and it works great, however zed seems to not show any completions when adding classes to an element. My main.rs file looks like the below (yes it is very minimal):

use leptos::*;

fn main() {
    console_error_panic_hook::set_once();
    mount_to_body(|| view! {<p> Hello World </p>})
}

If applicable, add mockups / screenshots to help present your vision of the feature

No response

highjeans avatar Aug 16 '24 18:08 highjeans

This is what I'm using with Leptos projects. Mostly works. Grabbed from a post on the Leptos Discord server. https://discord.com/channels/1031524867910148188/1114669318832132157/1245624733169487925

Am not sure why Zed requires the experimental config.

 "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "rust": "html"
        },
        "experimental": {
          "classRegex": [
            "class=\"([^\"]*)",
            "class={\"([^\"}]*)",
            "class=format!({\"([^\"}]*)"
          ]
        }
      }
    },

phillipbaird avatar Aug 17 '24 06:08 phillipbaird

This solution doesn't work entirely for me. If I type "tex", it will show "text", but once at "text-", it will print suggestion like it is a new word. I expect it to show "text-center" for example.

dbkblk avatar Nov 04 '24 10:11 dbkblk

I had to add the following to my settings file to make the tailwind suggestions appear, in addition to the lsp settings mentioned above:

"languages": {
    "Rust": {
      "language_servers": ["tailwindcss-language-server", "rust-analyzer"]
    }
  }

nathanweir avatar Aug 03 '25 21:08 nathanweir