Add Tailwind CSS support for Gleam

[arjunbajaj]

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.

Zed Config for Tailwind detection in Gleam

{
  "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.

Release Notes:

• Added support for Tailwind suggestions and validations for the Gleam programming language.

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @arjunbajaj on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

[arjunbajaj]

@cla-bot check

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!

[yeskunall]

Hey @arjunbajaj I’m not very familiar with Gleam, but just wondering: is it a good thing to have Tailwind enabled for Gleam by default? In other words, it makes sense to have Tailwind enabled for CSS, does the same apply for Gleam (.gleam)?

Also, what does a Lustre template look like? Is it a standard HTML file with support for Gleam syntax?

[arjunbajaj]

Hey @yeskunall,

I just tested it, this PR does not start the Tailwind LSP until the languages.Gleam config explicitly states to start the Tailwind LSP, so it should be safe.

It may not make sense in general to enable the Tailwind LSP for Gleam, but Gleam does have a popular use-case in the Lustre framework, similar to how Phoenix LiveViews are now quite a popular use-case for Elixir.

Without this PR, and just adding the config, we get hover functionality from the Tailwind LSP but not the suggestions and validation warnings that it gives in other languages.

Lustre now auto-detects Tailwind config in their build tool. After this PR merges, I'll discuss with the Gleam community if we could integrate a more seamless approach where we wouldn't even require the extra config in Zed if Gleam/Lustre auto-detects Tailwind.

[arjunbajaj]

Lustre does not have any special template syntax like JSX or HTML. It simply uses Gleam functions.

Here is an example:

fn view() {
  html.div([class("bg-black text-white")], [
    html.p([class("text-sm font-serif")], [html.text("hello")]),
  ])
}

However, since it is simply Gleam code, we may want to extract the Tailwind class string for better formatting and readability:

fn view() {
  let styles = "bg-black text-white
  <some-other-tailwind-styles>...
  "

  html.div([class(styles)], [
    html.p([class("text-sm font-serif")], [html.text("hello")]),
  ])
}

So we would need Tailwind suggestions and highlighting on all strings if possible.

While Lustre's syntax does not look like HTML, Tailwind does work properly as far as I can tell, on the syntax.

If in the future we need some changes, perhaps Tailwind could add special support for Gleam like it has for Svelte and Vue, and then we can change it here.

[yeskunall]

One last question, then I think we’re good to go.