Not working for HTML-like files #58

SHxKM · 2019-06-30T21:01:52Z

Thanks for the great extension.

For regular HTML files, it works great. However, the extension stops working completely once a file is associated via VSCode to another file type.

For example, Django template files use the regular .html extension but include special mustache {{ }} syntax. I'm using another extension to get tag highlighting for these files, as well as emmet expansion. But once I associate this file as "Django HTML" - TailwindCSS Intellisense stops working.

Anything I'm missing?

The text was updated successfully, but these errors were encountered:

SHxKM · 2019-07-01T16:46:49Z

Poking in the code, could it be as simple as adding "django-html" to this list in this file in src/index.ts?

https://github.com/bradlc/vscode-tailwindcss/blob/dd82e0282e03f6832f18976718f036050fe57ecc/src/index.ts#L40-L61

Perhaps it's better to make this list extensible through a setting?

JulioBarros · 2019-07-13T16:17:17Z

Doesn't work for me for .jsx files. Would be great if that could work too. Thanks.

alpap · 2019-07-18T02:00:56Z

same here for svelte files

dhc02 · 2019-07-19T16:27:03Z

I'm pretty sure @SHxKM's suggestion should work for django, and a similar simple change should work for most other html-like files.

As you can see from #18 , that's all it took to make this work for Phoenix last year.

I think that what we need is a setting for the extension that can be modified by users to add other filetypes so that it's not hard-coded in the extension, requiring a pull request for every addition.

This would be similar to how PHP Intelephense does it: In your settings.json, you can add

"intelephense.files.associations": [
    "*.php",
    "*.phtml",
    "*.myRandomFiletype"
  ]

and then it will start treating .myRandomFiletype as php.

I've looked into the code for this extension and I can't wrap my head around how to implement something like this yet. What do you think, @bradlc?

rhyswat · 2019-07-31T09:34:21Z

Ditto when I've told VS Code to treat foo.css as PostCSS. I get completions for foo.css as CSS.

Extension version 0.2.0

VS Code version 1.36.1

ryudice · 2019-08-10T15:54:17Z

It's not working on js and jsx files

pavelloz · 2019-08-11T14:26:37Z

I have the same problem, but in .liquid files. Maybe it would be nice to just have an option that you place under a language that enables plugin.

ie.

    "[liquid]": {
        "tailwindcss.enabled": true
    },

Anyway, since author is not responding and this is very easy fix + pretty much a blocker, probably forking is the way to go.

skycult · 2019-08-13T11:28:34Z

It does not works for any Vue + Tailwind project.

pavelloz · 2019-08-13T13:13:40Z

BTW. @skycult make sure you have config file in your project.

When i was tuning forked extension for my use case i discovered https://github.com/bradlc/vscode-tailwindcss/blob/master/package.json#L25-L27 which means extension wont even activate until you have a tailwind config.

kamalhm · 2019-09-09T10:18:00Z

@pavelloz

I've added the tailwind config but it still doesnt show up on vue-file, any suggestion?

reducio · 2019-09-19T15:11:44Z

I have problem with .html.eex and .html.leex files in Phoenix (Elixir).

If changing the VSCode file type (lower right hand corner of window) to HTML manually when editing tailwind classes which is annoying but does work.

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

Check topic on the ElixirForum, please: https://elixirforum.com/t/how-to-force-the-tailwind-css-intellisense-extension-for-vscode-work-with-html-eex-and-html-leex-files/25520

reducio · 2019-09-19T19:10:45Z

I have problem with .html.eex and .html.leex files in Phoenix (Elixir).

If changing the VSCode file type (lower right hand corner of window) to HTML manually when editing tailwind classes which is annoying but does work.

So I can see this extension support HTML (EEx):

https://github.com/bradlc/vscode-tailwindcss/blob/f5dfe02f74ac9bd68529f1997ae875691b819833/src/index.ts#L50

Check topic on the ElixirForum, please: https://elixirforum.com/t/how-to-force-the-tailwind-css-intellisense-extension-for-vscode-work-with-html-eex-and-html-leex-files/25520

SOLUTION: https://elixirforum.com/t/how-to-force-the-tailwind-css-intellisense-extension-for-vscode-work-with-html-eex-and-html-leex-files/25520/4?u=stavanger

jrock2004 · 2019-10-04T20:36:50Z

It would be awesome of we could add our list of filetypes because I think it would be bad for the maintainer of the plugin to have to add them all. The real logic seems to be in tailwindcss-language-server which seems to be private. Would be awesome to hear from main developer on if he would like help implementing something or are we all stuck with the ext he has chosen?

andreasRu · 2019-11-18T16:00:26Z

Need to use the extension for .cfm files too.

mrmurphy · 2019-11-25T23:03:36Z

I'd love to have it work for .re files!

flaugher · 2019-12-21T05:57:48Z

For what it's worth, I switched to Intellisense for CSS by Zignd and it works for my use case which is setting the VS Code language mode to Django HTML.

optimizasean · 2020-01-08T00:53:38Z

I would love to see this work on .NET files (.razor - Razor Syntax)!

angieherrera · 2020-02-07T22:37:07Z

Would love this for .twig files as well.

fpauser · 2020-02-08T17:55:26Z

And I'd love to see support for glimmer templates (hbs) in Ember.js projects

ghost · 2020-03-17T02:59:23Z

I personally like how emmet does it.

  "emmet.includeLanguages": {
    "HTML (Eex)": "html",
    "HTML (EEx)": "html",
  },

though from reading the code not sure why #54 is not working.

bux · 2020-03-27T09:12:15Z

👍 for mustache files

dasAnderl · 2020-04-10T20:16:29Z

doesnt work in vue files in vs code. does work in intellij idea though.

zolrath · 2020-04-29T08:11:08Z

I can confirm that while trying the new v0.3.0-alpha.1 vsix the extension fails to provide IntelliSense for "HTML (EEx)" (.html.eex and .html.leex) files.

Testing on standard .html files in the same directory provides IntelliSense so it's not deactivated for this project as a whole, just the EEx files.

bradlc · 2020-04-29T09:53:36Z

@zolrath That's odd. It works fine for me in .html.eex files with this extension installed. Are you using the same one?

I am definitely going to look into adding a file association setting 👍 For now I have added some languages to v0.3.0-alpha-1 so please let me know if I've missed yours

bux · 2020-04-29T10:00:22Z

@bradlc
adding *.mustache would be appreciated

zolrath · 2020-04-29T17:54:18Z

@zolrath That's odd. It works fine for me in .html.eex files with this extension installed. Are you using the same one?

I am definitely going to look into adding a file association setting 👍 For now I have added some languages to v0.3.0-alpha-1 so please let me know if I've missed yours

@bradlc
I am using the ElixirLS extension which is the current most-supported Elixir plugin.
Additionally, I tried the extension you linked, both with ElixirLS enabled and with ElixirLS disabled and I not getting IntelliSense on .html.eex files.

ghost · 2020-04-29T18:54:56Z

I also get the same ^

zolrath · 2020-04-30T17:15:39Z

I've been performing some tests for Elixir support now that the name is correct in v0.3.0-alpha-1.

In a standard Phoenix project the directory structure (only showing relevant files/folders) is:

./
├── assets
│   └── node_modules
│   └── tailwind.config.js
├── lib
│   └── example_web
│   │   └── templates
│   │   │   └── layout (or any folder name)
│   │   │   │   └── root.html.eex
│   │   │   │   └── live.html.leex
│   │   └── live
│   │   │   └── page_live.html.leex
│   │   │   └── collocated_live.ex (has a render function with ~L"""html""" inside it)

The behavior I'm seeing is that if I start VSCode in the root directory I get no Tailwind IntelliSense of any kind.

Start VSCode in root

html: No IntelliSense
html.eex|html.leex: No IntelliSense

Start VSCode in /assets

html: Immediate IntelliSense when typing in class attribute
html.eex|html.leex: IntelliSense must be manually triggered. If I type Ctrl+Space while inside a class attribute autocomplete appears. It does not automatically trigger while typing but once Ctrl+Space or a space is pressed it begins autocompleting. If backspace is pressed autocomplete stops and must be retriggered with Ctrl+Space or space.

It seems that the extension isn't recognizing the tailwind.config.js files location?

Edit:
If vscode-tailwindcss requires tailwind.config.js and node_modules to be present it may be discovering tailwind.config.js properly but not finding node_modules

Since tailwind.config.js isn't in my root and there is no node_modules in my root, can you add a fallback to look for node_modules in the same directory as tailwind.config.js?

Edit 2:
Seems to be working great with alpha 2!

mikebusby · 2020-05-04T13:08:55Z

Would love to see support for nunjucks templates (.njk)

gerrywastaken · 2020-05-17T15:05:48Z

Use this instead: https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete

Just open the generated css file (e.g. public/css/app.css) in a tab and the classes will complete in all other tabs.

lobo-tuerto · 2020-06-04T15:12:27Z

I personally like how emmet does it.
  "emmet.includeLanguages": {
    "HTML (Eex)": "html",
    "HTML (EEx)": "html",
  },
though from reading the code not sure why #54 is not working.

For anyone stumbling upon this, the new way for making emmet work with your .html.eex files now is:

"emmet.includeLanguages": {
  "html-eex": "html"
},

lobo-tuerto · 2020-06-04T15:12:53Z

BTW this extension is not working with HTML EEx files anymore :(

mettiu · 2020-06-10T12:44:55Z

@bradlc
adding *.hbs and *.handlebars files would be appreciated

Nisthar · 2020-06-15T16:53:00Z

any updates?

bradlc · 2020-06-15T17:33:36Z

django-html is now one of the languages with built-in support 👍

andreasRu · 2020-06-15T17:43:25Z

So this issue "not working for HTML like files" has been closed with addition of django-html support? Should I open another issue for adding the support for other html like file extensions that still won't work, or should we just forget about it for now?

@zolrath That's odd. It works fine for me in .html.eex files with this extension installed. Are you using the same one?

I am definitely going to look into adding a file association setting For now I have added some languages to v0.3.0-alpha-1 so please let me know if I've missed yours

bradlc · 2020-06-15T17:50:15Z

@andreasRu v0.3.0 added support for any language, via the includeLanguages setting. If it's not working for you please open a new issue.

andreasRu · 2020-06-17T09:50:40Z

@bradlc Oh goodness!!! Just updated/added to my workplace, works PERFECTLY!!! LOVE YOU 💯 :D THANK YOU SO MUCH!!!

imbwaldo · 2020-06-25T00:53:02Z

Thanks a ton, @bradlc!

icarthik · 2020-07-18T02:52:36Z

could you pls extend for .hbs handlebars files

icarthik · 2020-07-18T02:52:55Z

@bradlc could you pls extend for .hbs handlebars files

jd-solanki · 2021-05-03T16:13:48Z

for hbs:

{
    "tailwindCSS.includeLanguages": {
        "hbs": "html",
    },
}

aanomm · 2021-06-13T10:32:13Z

this still doesn't seem to work for nunjucks
should it?
nunjucks is so gooooood

xshapira · 2021-09-06T13:18:21Z

For Django templates:

"tailwindCSS.includeLanguages": {
    "plaintext": "django-html",
    "django-html": "html",
  }

Works flawlessly!

koppel · 2023-02-01T23:18:03Z

Thanks for that! The same works for nunjucks; can we make this part of the documentation?

    "tailwindCSS.includeLanguages": {
        "plaintext": "njk",
        "njk": "html"
    }

JexPY · 2023-07-06T01:52:09Z

@xshapira thnx,

Worked in the custom workspace:

    "json.schemaDownload.enable": true,
    "files.associations": {
        "*.html": "jinja-html"
    },
    "emmet.includeLanguages": {
        "jinja-html": "html"
    },
    "[jinja-html]": {
        "editor.defaultFormatter": "monosans.djlint",
        "editor.detectIndentation": false,
        "editor.tabSize": 2,
        "editor.formatOnSave": true
    },
    "tailwindCSS.includeLanguages": {
        "plaintext": "jinja-html",
        "jinja-html": "html",
        "javascript": "javascript",
        "css": "css"
    }

IgorArnaut · 2025-04-12T09:54:05Z

For Django templates:

"tailwindCSS.includeLanguages": {
"plaintext": "django-html",
"django-html": "html",
}

Works flawlessly!

Doesn't work for me. I have both Tailwind CSS Intellisense and junstyle's Django Template Support and I use django-tailwind package in Django project.

IgorArnaut · 2025-04-18T13:04:14Z

@andreasRu v0.3.0 added support for any language, via the includeLanguages setting. If it's not working for you please open a new issue.

How do I set it for .jsx files?

bradlc added a commit that referenced this issue Aug 6, 2019

add django support (#58)

c149599

praveenperera pushed a commit to praveenperera/vscode-tailwindcss that referenced this issue Sep 26, 2019

add django support (tailwindlabs#58)

e155d31

davelsan mentioned this issue Oct 29, 2019

[ Feat ] Vue render function support #83

Closed

bradlc pushed a commit that referenced this issue Apr 29, 2020

add mustache (#58)

a52765f

rik mentioned this issue Apr 30, 2020

v0.3.0-alpha-1 makes VSCode take 100% CPU #112

Closed

bradlc closed this as completed Jun 15, 2020

camjackson mentioned this issue Jul 27, 2020

not working on .svelte files #151

Closed

Not working for HTML-like files #58

Not working for HTML-like files #58

Comments

SHxKM commented Jun 30, 2019

SHxKM commented Jul 1, 2019 • edited Loading

JulioBarros commented Jul 13, 2019

alpap commented Jul 18, 2019

dhc02 commented Jul 19, 2019

rhyswat commented Jul 31, 2019

ryudice commented Aug 10, 2019

pavelloz commented Aug 11, 2019 • edited Loading

skycult commented Aug 13, 2019

pavelloz commented Aug 13, 2019

kamalhm commented Sep 9, 2019

reducio commented Sep 19, 2019

reducio commented Sep 19, 2019 • edited Loading

jrock2004 commented Oct 4, 2019

andreasRu commented Nov 18, 2019

mrmurphy commented Nov 25, 2019

flaugher commented Dec 21, 2019

optimizasean commented Jan 8, 2020

angieherrera commented Feb 7, 2020

fpauser commented Feb 8, 2020

ghost commented Mar 17, 2020

bux commented Mar 27, 2020

dasAnderl commented Apr 10, 2020

zolrath commented Apr 29, 2020

bradlc commented Apr 29, 2020

bux commented Apr 29, 2020

zolrath commented Apr 29, 2020 • edited Loading

ghost commented Apr 29, 2020

zolrath commented Apr 30, 2020 • edited Loading

mikebusby commented May 4, 2020

gerrywastaken commented May 17, 2020

lobo-tuerto commented Jun 4, 2020

lobo-tuerto commented Jun 4, 2020

mettiu commented Jun 10, 2020 • edited Loading

Nisthar commented Jun 15, 2020

bradlc commented Jun 15, 2020

andreasRu commented Jun 15, 2020

bradlc commented Jun 15, 2020

andreasRu commented Jun 17, 2020 • edited Loading

imbwaldo commented Jun 25, 2020 • edited Loading

icarthik commented Jul 18, 2020

icarthik commented Jul 18, 2020

jd-solanki commented May 3, 2021

aanomm commented Jun 13, 2021

xshapira commented Sep 6, 2021

koppel commented Feb 1, 2023

JexPY commented Jul 6, 2023

IgorArnaut commented Apr 12, 2025 • edited Loading

IgorArnaut commented Apr 18, 2025

SHxKM commented Jul 1, 2019 •

edited

Loading

pavelloz commented Aug 11, 2019 •

edited

Loading

reducio commented Sep 19, 2019 •

edited

Loading

zolrath commented Apr 29, 2020 •

edited

Loading

zolrath commented Apr 30, 2020 •

edited

Loading

mettiu commented Jun 10, 2020 •

edited

Loading

andreasRu commented Jun 17, 2020 •

edited

Loading

imbwaldo commented Jun 25, 2020 •

edited

Loading

IgorArnaut commented Apr 12, 2025 •

edited

Loading