How to get Tailwind CSS IntelliSense working

[woller]

I'm playing around with Phlex and I can really see some potential here. It's a very cool project. However the fact, that I cannot get the Tailwind CSS IntelliSense VSCode extension working, is holding me back from wanting to use it. This may very well be just me, who cannot figure out how to configure it correctly 🙂
Has anyone managed to get IntelliSense working properly in phlex views and components?

[joeldrapper]

I expect Tailwind auto-complete extensions use an HTML parser. They would need to understand Ruby to work with Phlex. I think it should be possible to develop better editor tooling for Phlex (including Tailwind support) as an extension for the Ruby LSP project in the future. I don't think the extension API is ready yet.

[woller]

That's too bad. I was hoping it was just me not understanding something 🙂 But thank you for the answer and for a really cool gem

[joeldrapper]

You’re welcome. I do hope to be able to have a Ruby LSP plugin with Tailwind support soon.

[hangsu]

I think the Tailwind auto-complete extension actually uses regex.

I haven't tested this with VSCode, but you should be able to use the tailwindCSS.experimental.classRegex configuration to make it work.

Might need to mess around with tailwindCSS.includeLanguages too.

[joeldrapper]

That looks promising. I’m still very interested in building a Ruby LSP plugin for Phlex and Phlex/Rails but this might be a good compromise for now.

[zealot128]

Made it work - using Lsp Config in Neovim and played around a little:

https://gist.github.com/zealot128/cf8b0ad74df5a9ab3e734b9e6acc41e8

 filetypes = { "aspnetcorerazor", "astro", "astro-markdown", "blade", "clojure", "django-html", "htmldjango", "edge", "eelixir", "elixir", "ejs", "erb", "eruby", "gohtml", "haml", "handlebars", "hbs", "html", "html-eex", "heex", "jade", "leaf", "liquid", "markdown", "mdx", "mustache", "njk", "nunjucks", "php", "razor", "slim", "twig", "css", "less", "postcss", "sass", "scss",   "stylus", "sugarss", "javascript", "javascriptreact", "reason", "rescript", "typescript", "typescriptreact", "vue", "svelte", "ruby" },  
  init_options = {        
    userLanguages = {
      ruby = "php",
    },
  },
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
    -- add class: "..." and class: '' 
          [[class= "([^"]*)]],
          [[class: "([^"]*)]], 
          [[class= '([^']*)]],
          [[class: '([^']*)]],
         -- 
         --  '~H""".*class="([^"]*)".*"""',
         --  '~F""".*class="([^"]*)".*"""',  
        },
      } 
    }
  }

• map ruby to php (or any other language that is listed in the html languages)
• add ruby to the filetypes so the LSP activates (Neovim)
• clss Regexp, not sure what the last 2 lines are doing, that's borrowed from the current issue https://github.com/tailwindlabs/tailwindcss-intellisense/issues/737, so just comment

KISS regexp parsing can do most of the job I guess.. :)

[joeldrapper]

This looks great!

[bbugh]

Here is the configuration for VSCode using the same tailwind-intellisense's experimental.classRegex setting that zeal128 mentioned above, with improvements/corrections to the regex.

You need to first turn it on for Ruby using includeLanguages (which isn't needed for erb, as tailwind is already enabled for that). Then specify the classRegex. This will make class: "" or class: '' syntax work anywhere in any language:

{
  "tailwindCSS.includeLanguages": {
    "ruby": "html"
  },
  "tailwindCSS.experimental.classRegex": [
	"\\bclass:\\s*[\"']([^\"']*)[\"']",
  ]
}

If you want to only enable it only for the Ruby language for safety, you can specify it in the [ruby] settings block, (and [erb] if you want that too).

{
  "tailwindCSS.includeLanguages": {
    "ruby": "html"
  },
  "[ruby]":{
    "tailwindCSS.experimental.classRegex": [
      "\\bclass:\\s*[\"']([^\"']*)[\"']",
    ]
  },
  "[erb]":{
    "tailwindCSS.experimental.classRegex": [
      "\\bclass:\\s*[\"']([^\"']*)[\"']",
    ]
  }
}

[joeldrapper]

🤩 I wonder if this works with Zed. 🤔

[pjmelling]

Nice, this worked for me. Thank you!