How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files?

Thanks. Works for me :grinning:

This was changed again in elixir-ls 0.4.0

I changed my fork of vscode-tailwind to fix it:


By installing and manually building and install (see further up the chain) I’m able to have TailwindCSS classes autocomplete. I’m not sure this is was worth the effort but hopefully it was.

Thanks for your feedback. Our pull-requests was be merged in original lib, it’s should works fine:



I didn’t follow from the beginning but I’m a little confused about what plugin to use to get Tailwind Intellisense working with our eex/leex files…
Also since there is a new version of ElixirLS which define EEx files simply as eex… I wanted to know what to do to have the Tailwind intellisense to work now?
I’ll be happy to know what’s working for you?

Do I need to configure something particular?
It’s not working for me…
Emmet and other HTML related things are working correctly with my .eex files but I still don’t get any Tailwind autocompletion…

You can try my solution:

  1. Disable or uninstall original tailwindcss vscode extension
  2. Download the latest *.vsix file
  3. Install the *.vsix file using command line ( )

ps: Thank to @praveenperera to provide the working extension


Seems like it’s the maintainer of tailwind intellisense is working on eex support currently. If you download the alpha version from the release list the autocomplete does work.


vscode-tailwindcss 0.3.0 was released, and works now


I’m using ElixirLS, v0.5.0 and still no success for syntax highlighting in the Phoenix templates.
Here is how my settings.json looks like:

  "telemetry.enableTelemetry": false,
  "files.trimTrailingWhitespace": true,
  "workbench.colorTheme": "One Dark Pro",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "newUntitledFile",
  "files.insertFinalNewline": true,
  "fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": [
  "emmet.includeLanguages": {
    "HTML (Eex)": "html",
    "html-eex": "html"
  "tailwindCSS.includeLanguages": {
    "HTML (EEx)": "html",
    "html-eex": "html",
    "plaintext": "html",
    "hbs": "html"
  "tailwindCSS.emmetCompletions": true,
  "workbench.iconTheme": "vscode-icons",
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "editor.fontSize": 13,
  "explorer.confirmDelete": false,
  "vsicons.dontShowNewVersionMessage": true,
  "beautify.language": {
    "js": {
      "type": [
      "filename": [
    "css": [
    "html": [
      "HTML (EEx)"
  "files.associations": {
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.eex": "HTML (EEx)",
    "*.leex": "HTML (EEx)",
    "*.html.eex": "HTML (EEx)"

Any idea? Tailwind INtelli Sense works but partially in Phoenix templates :frowning:

I believe the issue is in your file associations, which should be “html-eex”.

See my settings here.

1 Like

@Dusty: Still no success :(. What Elixir extension are you using?

I removed/disabled all the extensions, then re-installed them one by one and it worked as needed. Sometimes it is really frustrated to find a lot of different settings here and there and you don’t know which is really the good one. Thank you @Dusty!