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

Phoenix Forum Questions / Help
, , ,
22

Thanks. Works for me :grinning:

23

This was changed again in elixir-ls 0.4.0

I changed my fork of vscode-tailwind to fix it:

3 Likes
24

By installing https://github.com/praveenperera/vscode-tailwindcss/releases/tag/v0.3.0 and manually building and install https://github.com/reducio/vscode-html-css/tree/add-html-eex (see further up the chain) I’m able to have TailwindCSS classes autocomplete. I’m not sure this is was worth the effort but hopefully it was.

25

Thanks for your feedback. Our pull-requests was be merged in original lib, it’s should works fine: https://github.com/ecmel/vscode-html-css

2 Likes
26

Hello,

I didn’t follow from the beginning but I’m a little confused about what plugin to use to get Tailwind Intellisense working with our eex/leex files…
Also since there is a new version of ElixirLS which define EEx files simply as eex… I wanted to know what to do to have the Tailwind intellisense to work now?
I’ll be happy to know what’s working for you?

27

Hello,
Do I need to configure something particular?
It’s not working for me…
Emmet and other HTML related things are working correctly with my .eex files but I still don’t get any Tailwind autocompletion…

28

You can try my solution:

  1. Disable or uninstall original tailwindcss vscode extension
  2. Download the latest *.vsix file https://github.com/praveenperera/vscode-tailwindcss/releases/tag/v0.3.0
  3. Install the *.vsix file using command line ( https://code.visualstudio.com/docs/editor/extension-gallery )

ps: Thank to @praveenperera to provide the working extension

3 Likes
29

Seems like it’s the maintainer of tailwind intellisense is working on eex support currently. If you download the alpha version from the release list the autocomplete does work. https://github.com/bradlc/vscode-tailwindcss/releases/tag/v0.3.0-alpha.3

3 Likes
30

vscode-tailwindcss 0.3.0 was released, and works now

3 Likes
31

I’m using ElixirLS, v0.5.0 and still no success for syntax highlighting in the Phoenix templates.
Here is how my settings.json looks like:

{
  "telemetry.enableTelemetry": false,
  "files.trimTrailingWhitespace": true,
  "workbench.colorTheme": "One Dark Pro",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "newUntitledFile",
  "files.insertFinalNewline": true,
  "fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": [
    "**/*.html"
  ],
  "emmet.includeLanguages": {
    "HTML (Eex)": "html",
    "html-eex": "html"
  },
  "tailwindCSS.includeLanguages": {
    "HTML (EEx)": "html",
    "html-eex": "html",
    "plaintext": "html",
    "hbs": "html"
  },
  "tailwindCSS.emmetCompletions": true,
  "workbench.iconTheme": "vscode-icons",
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "editor.fontSize": 13,
  "explorer.confirmDelete": false,
  "vsicons.dontShowNewVersionMessage": true,
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "HTML (EEx)"
    ]
  },
  "files.associations": {
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.eex": "HTML (EEx)",
    "*.leex": "HTML (EEx)",
    "*.html.eex": "HTML (EEx)"
  }
}

Any idea? Tailwind INtelli Sense works but partially in Phoenix templates :frowning:

32

I believe the issue is in your file associations, which should be “html-eex”.

See my settings here.

1 Like
33

@Dusty: Still no success :(. What Elixir extension are you using?

34

I removed/disabled all the extensions, then re-installed them one by one and it worked as needed. Sometimes it is really frustrated to find a lot of different settings here and there and you don’t know which is really the good one. Thank you @Dusty!

2 Likes