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

stavanger · September 19, 2019, 1:28pm

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

I same tried add settings .html.eex and .html.leex for IntelliSense for CSS class names in HTML, but don’t work for me.

So I can see this extension support HTML (EEx): https://github.com/bradlc/vscode-tailwindcss/blob/f5dfe02f74ac9bd68529f1997ae875691b819833/src/index.ts#L50

Thanks for help.

tme_317 · September 19, 2019, 3:00pm

I had the same issue… and I think the line of code you referenced is recently committed to master but is still unreleased on the VSCode extension site. I tried cloning master and building/installing the .vsix file myself but for some reason it still didn’t work. Maybe the issue relates to recent capitalization changes in the file type (Eex vs EEx).

After wasting some time I ended up punting and just changing the VSCode file type (lower right hand corner of window) to HTML manually when editing tailwind classes which is annoying but does work.

stavanger · September 19, 2019, 3:17pm

It really works, I think that you’re right. I wrote report at issue on the GitHub: https://github.com/bradlc/vscode-tailwindcss/issues/58#issuecomment-533177238

Thank you for help! Will wait fix.

ps: So, I see that autor a long time don’t reply. I think that may be do a fork.

stavanger · September 19, 2019, 7:07pm

I found a solution, helped me this extantion GitHub - ecmel/vscode-html-css: Visual Studio Code Extension - CSS Intellisense for HTML.
Thanks you so much Ecmel Ercan and @tme_317 for your thoughts!

But this extension not worked with HTML (EEx) files. I contributed to this. Until the author has merged pull-request, you can use my branch: https://github.com/reducio/vscode-html-css/tree/add-html-eex

git clone https://github.com/reducio/vscode-html-css/tree/add-html-eex
npm install
vsce package

# deps may be need, if you need hack this code
npm install -g typescript
npm install -g yo generator-code
npm install -g vsce
npm i -g @zeit/ncc

So, after run vsce package you get file vscode-html-css-0.2.3.vsix in root project folder.
Then you need install extension manually:

Don’t forget about settings of extension.
In settings.json add:

    "css.remoteStyleSheets": [
        "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    ],

Usage:
You can view a list of attributes via ctrl + space.

Enjoy auto completion Tailwind CSS in your HTML (EEx) files.

Upvote, please: visual studio code - How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files? - Stack Overflow

tme_317 · September 19, 2019, 7:14pm

Wow, cool. No more manual file type switching!

Thank you so much!

stryrckt · September 19, 2019, 9:48pm

Thanks for that! The next question is how to get it working with .leex LiveView templates.

stavanger · September 19, 2019, 10:47pm

This also works for .leex files. But I observe that on MacOS the extension works through time, I will look for a problem. I tested extension only on WSL (Windows Subsystem for Linux)

stavanger · September 20, 2019, 12:08am

So, I found problem, Tailwind CSS loaded only through a class call at .html file, this must be do once, after that css classes will be available in all .html.eex and .html.leex files.

For example:

Call any class in your assets/css/index.html (it’s kludge).
You get all Tailwind CSS classes in your .html.eex and .html.leex files.

I read api docs for VSCode extension and think there is a solution, just need time.

The Language Server Protocol remote protocol is simply not called when opened .html.eex and .html.leex, only when opened .html (and other already a implemented files extensions).

stryrckt · September 20, 2019, 2:49am

Hmm, not sure if I am understanding the kludge correctly. I created an assets/css/index.html file with a div that references a class defined in app.css and some Tailwind classes, but still IntelliSense isn’t working in .leex files. It works in .eex files though.

dokuzbir · September 20, 2019, 8:15am

I don’ use Tailwind css. But if vscode-elixir extension installed adding that code to setttings.json can solve problem.

    "files.associations": {
        "*.html.eex": "HTML (Eex)",
        "*.html.leex": "HTML (Eex)"
    }

stavanger · September 20, 2019, 9:28am

Yes, you right. Tell me please, what is OS you use?

stavanger · September 20, 2019, 10:00am

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.

dokuzbir · September 20, 2019, 10:35am

But tailwind css intellisense supports vscode-elixir so HTML (Eex) right ? I mean for it.

stavanger · September 20, 2019, 11:00am

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.

stryrckt · September 20, 2019, 5:05pm

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.

stavanger · September 20, 2019, 6:08pm

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

praveenperera · September 30, 2019, 2:49am

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

stavanger · October 7, 2019, 1:17pm

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

praveenperera · October 8, 2019, 12:09am

Yes build off the develop branch

r8code · December 27, 2019, 11:27am

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

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"]

extensions :
- Elixir snippets
- ElixirLinter
- ElixirLS Fork
- EEx snippets
- EEx Formatter/Beautify
- HTML CSS Support
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 ?