Autocompletion Not Working with Vue.js and TailwindCSS v4

[ElvinKyungu]

Description

The autocompletion for TailwindCSS classes is not working in my Vue.js project using TailwindCSS v4. This makes development less efficient and increases the chances of errors due to manual typing of CSS classes.

Steps to Reproduce

Initialize a Vue.js project with vite and install TailwindCSS v4.
Configure tailwind.config.js to include Vue files as templates.
Try using TailwindCSS classes in a .vue file.
Notice that autocompletion for TailwindCSS classes doesn’t work (neither in nor <script>).

Expected Behavior

TailwindCSS class autocompletion should work, suggesting valid classes and assisting in writing them.

Environment

IDE/Editor: Visual Studio Code
Installed Extensions:
Tailwind CSS IntelliSense v0.14.1
Vue.js Version: 3.5
TailwindCSS Version: 4.x
Build Tool: Vite

Additional Context

Verified that tailwind.config.js includes the correct paths for .vue files.
The Tailwind CSS IntelliSense extension is enabled and properly configured.
No error messages appear in the console.

Suggestions

If this issue is related to a specific configuration of TailwindCSS v4 or a conflict with Volar, providing clarification in the documentation or updating the extension could help resolve the problem.

[rrobertobt]

Same with Nuxt 3 and the Vite plugin, with CSS configuration instead of JS, intellisense not working

[vikramsoni2]

noticed the same behaviour, its not just vue, its in astro, next and perhaps other too.

I suspected it could be because of the missing tailwind.config file.

just added a file tailwind.config.mjs into my project and the intellisense is now working..

my tailwind.config mjs like this since I am using astro

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {},
	},
	plugins: [],
}

[thecrypticace]

@rrobertobt @vikramsoni2 Nah, a config file is not necessary. Adding one kinda forces IntelliSense into a "fallback" mode where it's using an embedded version of Tailwind CSS v3.4. It also means it couldn't detect your Tailwind CSS v4 installation and/or your project's CSS file.

Can you please provide reproductions?

@ElvinKyungu Could you also provide a reproduction?

[nimrossum]

I am experiencing this problem as well, when using bun in combination with bun-plugin-tailwind.

It seems the matching code has not been updated in 6 months:

https://github.com/tailwindlabs/tailwindcss-intellisense/blame/9e52eae31fbca9ba40e81c115278ffb2f5b930ab/packages/tailwindcss-language-server/src/tw.ts#L823

This is where the output shown in VSCode comes from as well:

[Info  - 9:57:30 AM] [GLOBAL] No matching project for document {
  fsPath: 'C:\\project\\index.css',
  normalPath: '/c:/project/index.css'
}

Seems like this and the troubleshooting guide on needs to be updated, since v4 is zero config?

EDIT: Auto complete etc. works for me now, even without a tailwind config file.

I tried reloading the window and looking through the output (Cmd/Ctrl + Shift + P > Tailwind CSS: Show output). Can you guys provide the information logged in the beginning, if you are still experiencing issues?

[Devank-Yt]

Thanks a lot, @nimrossum i was searching again and again , and started doubting the installation method of tailwind v4, and but when i used tailwind class it works fine now.
so issue goes with tailwind IntelliSense, i tried these same command

(Cmd/Ctrl + Shift + P > Tailwind CSS: Show output).
This is where the [output shown in VSCode](https://github.com/tailwindlabs/tailwindcss

[Info  - 9:57:30 AM] [GLOBAL] No matching project for document {
  fsPath: 'C:\\project\\index.css',
  normalPath: '/c:/project/index.css'
}

Problem: tailwind css intelliSense needs vscode window a reload, you done it with cmd ( Ctrl + Shift + P ) -> reload window
or
Just close and reopen it.

Happy Coding Everyone