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

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.

2 Likes

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.

1 Like

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.

I found a solution, helped me this extantion https://github.com/ecmel/vscode-html-css.
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:

6

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

4 Likes

Wow, cool. No more manual file type switching!

Thank you so much!

1 Like

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

1 Like

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?

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.

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.

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.

1 Like

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

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