not working on .svelte files

[FocalChord]

Nothing is being auto completed as shown below

[feugy]

I'm having the same issue, despite having configured the extension to treat svelte files as html:

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

[camjackson]

I also had this problem. @feugy I actually found that setting "svelte": "html" was breaking it for me. I deleted that from my settings and it started working. I also installed this extension as suggested by this comment, and restarted vscode to make sure all the settings and extensions were taking effect.

[camjackson]

Update: it was still being super flaky, sometimes working and sometimes not. I think TabNine was interfering with the autosuggest so I've just uninstalled that, and it seems to have helped.

[Miaourt]

Hi, I'm also having this issue, can't get Tailwindcss-intellisense to work with my .svelte files, nones of the solutions suggested up there worked sadly :(

EDIT : managed to get it working by using a capitalized "Svelte" for the includeLanguages setting.
Yet, it begin to work only after the first entry in the class="", aka if I just opened class="start-typing..." it will not suggest anything, but class="test start-typing..." will show suggestions...
Still not stellar 😅

[Miaourt]

Well, starting today, even with my capitalized Svelte tweak, nothing works again 😓

[raicem]

Hi @Miaourt. I was having the same problem. On any kind of file (.html or .vue) it didn't do any autocomplete unless I typed something first (like your example class="test start-typing...".

On my setup I realized this is was due to editor.quickSuggestions setting of the VSCode. I was set to null which was an invalid option. I have set that to true and the autocomplete problem went away.

I honestly don't really know what this editor.quickSuggestions option does. It fixed my autocomplete problem but will it have any other implication, I don't really know 😄

[Miaourt]

Hi @raicem, nice catch ! Seems to do the trick for me too, for now !

[juancpgo]

@raicem Pretty cool, I was having the same issue and it also seems to have worked for me. Thanks! 😀

[bradlc]

Are you still having issues @FocalChord?

[trevyn]

I just ran into this issue; there's definitely something still going on here, and it would be great to figure out the happy setup path and at least mention it in the setup docs, so every Svelte + Tailwind + VSCode user doesn't have to find this issue, run through it, and hack at their settings.😅

I can at least say that this should be in the plugin defaults:

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

Also worth mentioning that VSCode has a "Trigger Suggest" command (Apparently Command-I by default? Or Command-shift-P, search for "trigger suggest"); it seems that some suggestions pop up automatically in certain cases, and sometimes it works better with explicit activation. I don't know why it works that way.🤷

Possible next debugging step: Does the Tailwind plugin work automatically in .html files without the https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css plugin installed, irrespective of any Svelte things?

[bradlc]

it seems that some suggestions pop up automatically in certain cases, and sometimes it works better with explicit activation

This setting will probably help with that 👍

"editor.quickSuggestions": {
  "strings": true
}

Going to close this as it was created a long time ago and I don't believe there is an actual issue here. I just want to clarify a couple of things:

• Svelte is supported out-of-the-box and you do not need to add it to the includeLanguages setting, as long as you are using svelte.svelte-vscode
• Editing your editor.quickSuggestions (see above) setting will probably help with Svelte completions as HTML attributes in Svelte files are considered "strings"
• The ecmel.vscode-html-css is not required and will provide its own suggestions which may interfere with the Tailwind IntelliSense suggestions

Please open a new issue if you are still having issues 🙏

[briansteeleca]

I tried all suggestions in here and but can't get tailwindcss-intellisense to work for .svelte files. To demo, I also created a template.svelte file to show that it works with .html but not with .svelte.

Maybe there's a conflict with another extension? These are the Svelte extensions I'm using.

I tried disabling all but Svelte for VSCode (and reloading) but still no luck. This is my first time trying Tailwind CSS and I can see that Intellisense will be very important. :)

[briansteeleca]

tailwindcss-intellisense now works for me, but unfortunately I don't know what changed that make it work.

[srid]

@bradlc's comment worked for me but I had to reload vscode.

[yonnic]

I recommend switching to WindiCSS which uses tailwind and works perfectly with svelte.
They have their own IntelliSense plugin "WindiCSS IntelliSense" which perfectly works right away

[pavelloz]

In my case it was a problem with config name.
I had tailwindcss.config.js and had to change it to tailwind.config.cjs

[millardm]

I was initially having this issue, which brought me to this thread. The suggestion from @bradlc in this post above got it working for me. In particular, I added the following to my settings.json in VS Code.

"editor.quickSuggestions": {
  "strings": true
}

[Char1esOrz]

According to my tests, with multiple folders open in one workspace, the tailwindcss plugin will fail
cmd+shift+N
Then open the project folder
Plugin can take effect

[44Chann]

open your vscode settings and paste this
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true,
}
}

basically it does is it allows vs code to give suggestion even if it is string
it may fix you prblem it worked for me

[robots4life]

project/.vscode/settings.json

"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
}

This seems to work with single and multiple folders in a workspace.

[JVariance]

Can anybody tell me, how to enable intellisense for the theme function inside the tailwind.config.js file? It works in css and svelte files, but not inside the config file.
I want to use it like

// ...
addComponent({
  background: theme('...')
})

but I don't get suggestions. The solutions above don't solve it.

[epuerta9]

same issue as literally everyone else. Installing WindiCSS did the trick for me

[richeyphu]

.vscode/settings.json

"tailwindCSS.experimental.configFile": "tailwind.config.ts"

Manually specifying the config file resolved the issue for me.

p.s. before adding the above config, I encountered the error below. I have no idea why it searched for the Nuxt config while I was using Svelte. lol

[Error - 12:17:00 AM] Tailwind CSS: ENOENT: no such file or directory, stat '/<path_to_project>/.nuxt/tailwind.config.cjs'

[h4chi]

Had this issue with the tailwindcss v3.4.11. Switching to the pre-release version of the extension seems to fix it. Along with specifying the config file in experimental options as mentioned by @richeyphu .

[varun-g91]

it seems that some suggestions pop up automatically in certain cases, and sometimes it works better with explicit activation

This setting will probably help with that 👍

"editor.quickSuggestions": {
  "strings": true
}

Going to close this as it was created a long time ago and I don't believe there is an actual issue here. I just want to clarify a couple of things:

* Svelte is supported out-of-the-box and you do not need to add it to the `includeLanguages` setting, as long as you are using [svelte.svelte-vscode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)

* Editing your `editor.quickSuggestions` (see above) setting will probably help with Svelte completions as HTML attributes in Svelte files are considered "strings"

* The `ecmel.vscode-html-css` is **not** required and will provide its own suggestions which may interfere with the Tailwind IntelliSense suggestions

Please open a new issue if you are still having issues 🙏

This worked for me