CODEWITHSUNDEEP
visual-studio-codeelixirphoenix-frameworktailwind-css
Dmitry S.
Dmitry S.

Reputation: 4544

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

Upvotes: 1

Views: 2768

Answers (1)

Dmitry S.
Dmitry S.

Reputation: 4544

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:

enter image description here

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.

Upvotes: 4

Related Questions