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

[Smef]

I had a similar issue in both VS Code and Jetbrains products, but the problem was actually before this error.

I was working in a Orchestra Testbench project, which has a symlink deep in the vendor folder back to the vendor folder in root of the project. The Tailwind Intellisense was getting stuck in a loop searching these directories and getting an error as below:

  errno: -63,
  code: 'ENAMETOOLONG',
  syscall: 'realpath',

It showed the full, looping path it was trying to scan.

Once it hit this error, it would get the "No matching project for document" error as other people have reported.

I added **/vendor/** to the ignore path in the plugin config in VS code and in the Jetbrains IDE and it no longer scans the vendor folder and gets stuck in this loop, resolving the issue.

[thecrypticace]

@Smef 😱 we should definitely fix that. Do you happen to have a git repo already set up I can test with? (I can create a test bench project if needed — git repo would just be quicker)

[Smef]

Here's a demo repo: https://github.com/Smef/tailwind-symlink-demo

[matthias-sms]

I'm not sure if it's already been mentioned, but I haven't found a solution for this. Intellisense works fine for utility classes in class attributes and with @theme directives, but unfortunately doesn't work in some other cases.

I use VSCode with IntelliSense v0.14.4 and have a styles.css configuration.

• Intellisense doesn't work for custom classes. (which worked with v3)
• Intellisense also doesn't work in computed properties. (I haven't found a suitable regex for tailwindCSS.experimental.classRegex)

I installed Vue and Tailwind as follows:

pnpm create vue@latest
pnpm install tailwindcss @tailwindcss/vite

The configuration in styles.css is minimal:

@import "tailwindcss";

@theme {
  --color-gold: #efbf04;
  --color-silver: #c4c4c4;
}

@layer components {
  .nice-layout {
    @apply h-20 m-2 p-2 border-2 border-gray-400;
  }
}

In App.vue, bg-gold is detected by Intellisense. However, nice-layout (inside a class attribute) and text-xl (inside a computed property) are not detected.

<script setup lang="ts">
import { ref, computed } from 'vue';

const trigger = ref(true);

const myClasses = computed(() => {
  return {
    'text-xl': trigger,
  }
})
</script>

<template>
  <div class="nice-layout bg-gold" :class="myClasses">
    You did it!
  </div>
</template>

@thecrypticace Is there already a more suitable ticket for this, or should I create a new one?

[thecrypticace]

Intellisense doesn't work for custom classes. (which worked with v3)

1. I'm pretty sure our extension has never suggested stuff from @layer utilities or @layer components in v3. We didn't consider your CSS files at all before v4 (aside from looking for @config) and this is still the case today with v3 (see screenshot below). I suppose it's possible that built-in the HTML language server in VSCode might've tho. Do you have an example of what you mean by it working in v3?
2. Aside, you should use @utility instead of @layer components in v4.

Intellisense also doesn't work in computed properties. (I haven't found a suitable regex for tailwindCSS.experimental.classRegex)

You can use this but it's a bit brittle syntax-wise:

"tailwindCSS.experimental.classRegex": [
  ["Classes\\s*=\\s*computed\\(\\(\\)\\s*=>\\s*([\\s\\S]+?)\\)", "'([^']+)'"],
],

screenshot from v3:

[matthias-sms]

@thecrypticace Many thanks for your help, the RegEx works perfectly! ☺️

To investigate the question of whether "it worked in v3", I created a VSCode profile for my mini-project and only installed the two extensions “Tailwind CSS IntelliSense” and “Vue - Official”. However, I tested with v4 and the latest version of Intellisense and not with v3. The settings.json is minimal:

{
    "files.associations": {
        "*.css": "tailwindcss"
    },
    "tailwindCSS.experimental.classRegex": [
        ["Classes\\s*=\\s*computed\\(\\(\\)\\s*=>\\s*([\\s\\S]+?)\\)", "'([^']+)'"]
    ]
}

As expected, Intellisense works in the class attribute and (now also😊) in the computed property, but not for the nice-layout class. However, if I use @utility instead of @layer components, as you suggested, hover also works for nice-layout:

@import "tailwindcss";

@theme {
  --color-gold: #efbf04;
  --color-silver: #c4c4c4;
}

@utility nice-layout {
  @apply h-20 m-2 p-2 border-2 border-gray-400;
}

To strengthen my assumption that it already works in v3 with the components layer, I replaced the configuration in styles.css with a tailwind.config.ts. The tailwind.config.ts is loaded in styles.css:

@import "tailwindcss";

@config "../tailwind.config.ts";

The tailwind.config.ts looks as follows:

import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

const config: Pick<Config, "content" | "theme" | "plugins"> = {
  content: {
    files: ["./index.html", "./src/**/*.{vue,js,ts}"],
  },

  theme: {
    extend: {
      colors: {
        gold: "#efbf04",
        silver: "#c4c4c4",
      },
    }
  },

  plugins: [
    plugin(({ addComponents }) => {
      addComponents({
        ".nice-layout": {
          "@apply h-20 m-2 p-2 border-2 border-gray-400": {},
        },
      });
    }),
  ],
};

export default config;

Interestingly, if I now hover over nice-layout, I get exactly the same tooltip that I got with the CSS configuration (and @utility instead of @layer components). Some things are clearer to me now, but I probably didn't understand it properly.

1. is @layer components deprecated in v4 and therefore no longer supported by Intellisense? I would be surprised, since the current documentation for v4 recommends the components layer for custom CSS (see https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

2. i don't want to use tailwind.config.ts but have Intellisense support for custom classes too. Is it therefore advisable to remove the components layer and convert each contained class into a utility class? It would bother me a little because it would take me again further away from the CSS standard.

[thecrypticace]

… However, I tested with v4 and the latest version of Intellisense and not with v3.

I would've expected you to test with v3 mainly because @layer components from CSS never worked at all in IntelliSense. Anything added via addComponents in a plugin did though. Maybe that's where the confusion is? I was curious to know what behavior you saw in v3 made you think it did work.

is @layer components deprecated in v4 and therefore no longer supported by Intellisense? I would be surprised, since the current documentation for v4 recommends the components layer for custom CSS (see https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

Again, it wasn't supported before either (but addComponents was).

There's two things here:

1. @layer components in v4 is just vanilla CSS and that's it. There's no special behavior, it doesn't support variants, and there's no special IntelliSense support for detecting these.
2. If you want to replicate the behavior of @layer components in v3 where variants were supported, you have to use @utility to do so.

[thecrypticace]

Further, things added in addComponents in v4 go in the utilities layer since addComponents just calls addUtilities: https://github.com/tailwindlabs/tailwindcss/blob/63b9be94838d68c12e34014b4cf9dc2927c24e15/packages/tailwindcss/src/compat/plugin-api.ts#L447-L449

[thecrypticace]

i don't want to use tailwind.config.ts but have Intellisense support for custom classes too. Is it therefore advisable to remove the components layer and convert each contained class into a utility class? It would bother me a little because it would take me again further away from the CSS standard.

Yes, I would convert these to @utility. Technically v3 was further away from the CSS standard here because we were overriding native cascade layers (I think our syntax came first tho?). That means that if you used @layer components you didn't get a cascade layer at all.

[matthias-sms]

@thecrypticace You're right, the compatibility layer in v4 is obviously not the same as v3, therefore I tested again with tailwind version 3.4.17 and Tailwind CSS IntelliSense v0.10.5. The settings.json and tailwind.config.ts are the same as above. The hover now looks like this:

And that is exactly how I know it from before. Because I want something similar for custom classes, I thought I would get that with @layer components. I know that this is vanilla CSS, and I would prefer it to @utility because I don't need variants for my custom classes. But if I want Intellisense, I have no other choice than to use @utility classes. Why shouldn't it be possible for Intellisense to support classes in @layer components as per convention?

[thecrypticace]

Why shouldn't it be possible for Intellisense to support classes in @layer components as per convention?

So it's a convention but only so far as we have a dedicated spot for it by default so they appear before utilities. But you can "deconstruct" the imports for Tailwind CSS and name the layers anything you want:

@layer john, paul, george /* this was components before */, ringo;

@import 'tailwindcss/theme.css' layer(john);
@import 'tailwindcss/preflight.css' layer(paul);
@import 'tailwindcss/utilities.css' layer(ringo);

@layer george {
  .nice-layout {
    margin: 0.5rem;
  }
}

Now, I don't recommend doing this (with picking odd layer names I mean) but you definitely can and IntelliSense doesn't care if you do.

It's only ever been concerned with utilities and variants known to Tailwind CSS:

• Things added via addUtilities, matchUtilities, addComponents, matchComponents, addVariant, matchVariant
• And in v4: @utility, @custom-variant, and a number of other features

All of the features and suggestions are designed around that fact. There are assumptions that every class that we care about can have variants applied to it, that when we see something like hover:flex that the hover is a variant, etc. Once you add completion for arbitrary classes many of those assumptions may no longer be true — but it also depends on the project. I think there was an extension that you could add to VSCode to add suggestions for arbitrary classes it found in CSS files in the project but it's entirely unrelated (I also don't know if it's even maintained).

I'm not necessarily opposed to adding this feature to IntelliSense but it's a bit more complicated of a task because of all of the assumptions we make about what classes we know about and which ones we don't.

[thecrypticace]

As an aside this issue has kinda derailed a bit.

@ElvinKyungu I'm gonna close this one as no reproduction was provided. If you can provide a reproduction, please open a new issue. Thanks!
@Smef thanks for the symlink repro. I opened an issue a few days ago as a reminder for me to look into this (I've also reproduced it locally with a simpler project).

[thecrypticace]

Also @matthias-sms I've added the ability to suggest normal CSS classes to our backlog so I am going to look into it — I just don't necessarily expect to ship such a feature soon.

[matthias-sms]

@thecrypticace I apologize that the chat has drifted away from the original topic. The title triggered me and I didn't want to create a new ticket unnecessarily. Thank you very much for your support and your detailed answers.❤️ It has helped me a lot and improved my understanding of Tailwind and IntelliSense. ☺️

[thecrypticace]

all good!