does'nt work on .vue template files ! about tailwindcss-intellisense HOT 21 CLOSED

If it helps anyone

 "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html",
  },

adding this in my settings worked for me..

from tailwindcss-intellisense.

I also had to enable quick suggestions in strings to support multi-line strings. Otherwise it would only work in single-line strings.
My .vscode/settings.json now contains the following:

{
	"css.validate": false,
	"tailwindCSS.includeLanguages": {
		"vue": "html",
		"vue-html": "html"
	},
	"editor.quickSuggestions": {
		"strings": true
	}
}

from tailwindcss-intellisense.

Hey @sandro-git. The extension will only activate if your project has a Tailwind CSS config file.

from tailwindcss-intellisense.

Same problem here. Can this be reopened ?

I have a config file. The autocomplete works, but not the syntax highlighting. Am I missing something?

Use Vetur for syntax highlighting in Vue files and use postcss as your style language.

from tailwindcss-intellisense.

If it helps anyone

 "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html",
  },

adding this in my settings worked for me.

can you show us the way you add it on your project ? it still doesn't work for me. I create my project with Vue CLI . how do you set up yours ?

from tailwindcss-intellisense.

This worked for me. Using nuxt2.

https://javascript.plainenglish.io/how-to-fix-tailwind-css-intellisense-in-visual-studio-code-3dede794df21

from tailwindcss-intellisense.

I also had to enable quick suggestions in strings to support multi-line strings. Otherwise it would only work in single-line strings. My .vscode/settings.json now contains the following:

{
	"css.validate": false,
	"tailwindCSS.includeLanguages": {
		"vue": "html",
		"vue-html": "html"
	},
	"editor.quickSuggestions": {
		"strings": true
	}
}

it works when appy this setting in setting.json

from tailwindcss-intellisense.

My config file is called tailwind.config.ts so I had to change "tailwindCSS.experimental.configFile": "./tailwind.config.js" to "tailwindCSS.experimental.configFile": "./tailwind.config.ts" in User/settings.json

from tailwindcss-intellisense.

I had this same problem and it didn't start working until I installed Vetur and ran through the setup.

from tailwindcss-intellisense.

If it helps anyone

 "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html",
  },

adding this in my settings worked for me..

You're the best!

from tailwindcss-intellisense.

For me fix was to change name of tailwind.config.ts to tailwind.config.js

from tailwindcss-intellisense.

Hello @bradlc. i forgot that sorry but after creating it with and without --full tag and reload vscode it still doesn't work. should i declare it in postcss config file to ?

from tailwindcss-intellisense.

Hi, came here with the same problem. Config exists and in .html it works great. But not in .vue files, and also not in .blade.php files. Do you maybe have an idea what could be the cause?

from tailwindcss-intellisense.

Same problem here. Can this be reopened ?

I have a config file. The autocomplete works, but not the syntax highlighting. Am I missing something?

from tailwindcss-intellisense.

Same issue here. I am not sure if this feature currently exists, sadly.

from tailwindcss-intellisense.

can you show us the way you add it on your project ? it still doesn't work for me. I create my project with Vue CLI . how do you set up yours ?

Oh no, not to your project, but to the settings in vscode.

from tailwindcss-intellisense.

If it helps anyone

 "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html",
  },

adding this in my settings worked for me..

@bradlc I think this should add into the default settings.

from tailwindcss-intellisense.

If it helps anyone

 "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html",
  },

adding this in my settings worked for me..

works like a charm! thank you

from tailwindcss-intellisense.

Even after adding the includeLanguages, and using npx tailwindcss init, it still doesn't work for me

from tailwindcss-intellisense.

In my case the tailwind.config.js was in a subfolder, so i added a tailwind.config.js to the root with

// tailwind.config.js on root dir
module.exports = require('./frontend/tailwind.config');

from tailwindcss-intellisense.

Settings.json that works for me:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.configFile": "./tailwind.config.ts"
}

Thanks to @phillipmohr for figuring out when using ts config.

from tailwindcss-intellisense.