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

If do you mean Tailwind CSS IntelliSense, that extension work incorrectly. Namely, the vscode language server is unavailable there. Author a long time not update repo. There is a few committe for repair the extension, but their is still don’t merged.

1 Like

Your update to the HTML CSS Support extension worked for me. I can now use the Tailwind CSS IntelliSense extension with both EEX and LEEX files. Thanks a bunch!

Note, I still need to have an index.html that references classes in the app.css and I need to open that file in vscode before Tailwind IntelliSense will start working with leex files. Kludgey, but much better than changing file extensions.

2 Likes

Thanks a bunch for your feedback! I will try repair this kludgey a coming soon.

You have to add HTML (EEx) to the tailwind-language-server file. Since the source code for that is not available. I added it to the uglified version.

You can manually build the extension from this repo and it should work: https://github.com/praveenperera/vscode-tailwindcss

1 Like

Thanks for your contribution! Yes, right, it problem with tailwind-language-server. Which is a branch for build? The develop branch?

Yes build off the develop branch

1 Like

I’m using this method , but still not success , my settings:

  1. vscode settings.json
"emmet.includeLanguages": {
        "HTML (EEx)": "html"
    },
...,

"files.associations": {
        "*.css": "stylus",
        "*.html.eex": "HTML (EEx)",
        "*.html.leex": "HTML (EEx)"
    },
"[elixir]": {
        "editor.defaultFormatter": "elixir-lsp.elixir-ls"
    },
"[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
"emmet.triggerExpansionOnTab": true,
"css.remoteStyleSheets": [
        "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    ],
 "css.fileExtensions": [ "css", "scss"]
  1. extensions :

    • Elixir snippets
    • ElixirLinter
    • ElixirLS Fork
    • EEx snippets
    • EEx Formatter/Beautify
    • HTML CSS Support
  2. assets/css/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./app.scss">
</head>
<body>
    <div class="border-white bg-black"></div>
</body>
</html>

I’ve already open the index.html but still no tailwind auto complete show up in .eex and .leex
is there something I missing ?

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:

3 Likes

By installing https://github.com/praveenperera/vscode-tailwindcss/releases/tag/v0.3.0 and manually building and install https://github.com/reducio/vscode-html-css/tree/add-html-eex (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: https://github.com/ecmel/vscode-html-css

2 Likes

Hello,

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?

Hello,
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 https://github.com/praveenperera/vscode-tailwindcss/releases/tag/v0.3.0
  3. Install the *.vsix file using command line ( https://code.visualstudio.com/docs/editor/extension-gallery )

ps: Thank to @praveenperera to provide the working extension

3 Likes

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. https://github.com/bradlc/vscode-tailwindcss/releases/tag/v0.3.0-alpha.3

3 Likes

vscode-tailwindcss 0.3.0 was released, and works now

3 Likes

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": [
    "**/*.html"
  ],
  "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": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "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!

2 Likes