Important notes.
If we use the HTML CSS Support extension that we need use HTML (EEx), not HTML (Eex).
The HTML CSS Support extension don’t support HTML (Eex), only HTML (EEx).
The vscode-elixir extension don’t support HTML (EEx).
The HTML CSS Support work in complex with ElixirLS: Elixir support and debugger, that support HTML (EEx).
Meanwhile, the commit was merged.
https://github.com/ecmel/vscode-html-css/commit/247b9d5478c7f8b7f9718de90fa46fdce1f38d20
But tailwind css intellisense supports vscode-elixir so HTML (Eex) right ? I mean for it.
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.
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.
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: GitHub - praveenperera/vscode-tailwindcss: No longer needed: https://github.com/bradlc/vscode-tailwindcss/releases/tag/v0.3.0 · GitHub
Thanks for your contribution! Yes, right, it problem with tailwind-language-server. Which is a branch for build? The develop branch?
I’m using this method , but still not success , my settings:
"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"]
extensions :
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 ?
