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

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.

It really works, I think that you’re right. I wrote report at issue on the GitHub: Not working for HTML-like files · Issue #58 · tailwindlabs/tailwindcss-intellisense · GitHub

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.

I found a solution, helped me this extantion GitHub - ecmel/vscode-html-css: Visual Studio Code Extension - CSS Intellisense for HTML · GitHub.
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:

6613×510 50.3 KB

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: https://stackoverflow.com/questions/58013281/how-to-force-the-tailwind-css-intellisense-extension-for-vscode-work-with-html/58017659#58017659

Wow, cool. No more manual file type switching!

Thank you so much!

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

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)

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:

1. Call any class in your assets/css/index.html (it’s kludge).
2. 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).

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.

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)"
    }

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