How to get html.heex files working with the VSCode Tailwind CSS IntelliSense extension?

Phoenix Forum Questions / Help
, , ,
1

I haven’t been able to get the VSCode Tailwind IntelliSense extension to work with html.heex files.

The plugin works with a plain .html file in the same project, and works perfectly on Phoenix 1.5 apps.

I looked for a solution here: How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files?, but similar fixes didn’t seem to work.
My tailwind.config.js and postcss.config.js both seem fine, and I set up another new project with the new phx tailwind generator; same result…
Tried my luck with settings.json but so far no :game_die::game_die:.

Has anyone dealt with this or got any ideas? Thanks! :egg: :hatching_chick: :hatched_chick:

3 Likes
2

You can add

"tailwindCSS.includeLanguages": { "phoenix-heex": "html" }

To your settings JSON and it works for standalone heex files.

I think inline heex with the ~H sigil might require changes to the extension.

3 Likes
3

Thank you for sharing your configuration.

Has the extension been updated to make this possible? Or is there another way to make this work?

4

The extension was updated to include .heex files, but not the sigil.
The maintainer is great, I didn’t ask about using the ~H sigil. In fact because of this kind of thing I tend to use separate code and template files. There’s more talk about this stuff in this other thread.

5

if you just add "elixir": "html", to the includeLanguages, the intellisense works for the ~H-sigil as well:

  "tailwindCSS.includeLanguages": { 
  "phoenix-heex": "html", 
  "elixir": "html",
}
10 Likes