V3 Intellisense not working correctly

[silvio-e]

For what version of Nuxt UI are you asking this question?

v3-alpha

Description

I'm experience problems with the VS Code Tailwind Intellisense plugin. I have used ui v2 without problems so far, but when using v3 it only shows suggestions when a tailwindcss.config.ts is freshly edited, but then after reloading or restarting VS Code, it doesn't work anymore. When it's working, it only shows a few of the classes, but not the most common ones like padding, margin etc..

Has someone experienced the same issue and knows a fix for that?

[metkm]

To add to this, When I deploy my app with Vercel. I have these warnings with Nuxt UI 3 and tailwind 4. I can open a issue for this If I figure out if this is a tailwind issue or anything to do with nuxt ui

When I build the app locally It works but I'm not sure what the issue might be.
Intellisense not working for me too btw

[namejiahui]

I found the v3 version currently doesn“t have the "@nuxtjs/tailwindcss" module(which would generate a tailwind configuration file in the .nuxt folder), so I think we need to manually configure tailwind for now.

It works for me after I added a css file in the assets folder with the content

@tailwind base;
@tailwind components;
@tailwind utilities;

Although the extension works without needing to add the tailwind configuration file,this doesn't align with my expectations.

[namejiahui]

based on this blog,I made some small adjustments

assets/global.css

@import "tailwindcss";
@import "@nuxt/ui";

nuxt.config.ts

export default defineNuxtConfig({
  css: ['@/assets/global.css']
})

[sandros94]

@metkm that screenshot is a different issue to this one, if you are still experiencing it you could open up a new issue with a reproduction/link? Although I'm currently not able to reproduce it.

In regard of this Intellisense issue:
As @lilijh pointed out, and as it is described in UIv3 docs, you have to add both @import "tailwindcss"; and @import "@nuxt/ui"; either in your css files or more simply in your app.vue.

Tailwind v4 now has a css-first approach, so the tailwind.config wont be used.
Also, as stated in the already linked Tailwind v4's announcement, you might have to switch to the pre-release version of their VS Code extension for proper Intellisense (although, once you add the css imports, even the current extension release should work).

Last note: one of the reasons why @nuxtjs/tailwindcss dependency has been removed is to make this module compatible with Vue projects #2416

[metkm]

I'm currently not able to reproduce it.

I have this issue only on vercel. Did you use vercel too? @sandros94

[sandros94]

I have this issue only on vercel. Did you use vercel too? @sandros94

Ok no, my bad. Double checking my deployments I was in fact NOT deploying on Vercel.
Could you please open up a new issue with a reproduction link?

[silvio-e]

I did several clean installs. I find this here in the output for the Tailwind CSS Intellisense pre-release plugin:

Locating server…
Booting server...
Checking if /Users/silvio/uitest2/.nuxt/nuxt-fonts-global.css may be Tailwind-related…
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
[Global] Creating projects: []
[Global] Preparing projects...
[Global] Initializing projects...
[Info  - 14:44:09] [GLOBAL] No matching project for document {
  fsPath: '/Users/silvio/uitest2/app.vue',
  normalPath: '/Users/silvio/uitest2/app.vue'
}
[Global] Initialized 0 projects
[Info  - 14:48:32] [GLOBAL] No matching project for document {
  fsPath: '/Users/silvio/uitest2/app.vue',
  normalPath: '/Users/silvio/uitest2/app.vue'
}

Tailwind itself works. So any classes I use get applied. Only the intellisense is not working.
Anyone an idea what could be wrong?

[sandros94]

@silvio-e could you try and disable all VS Code extensions and only reactivate Tailwind's one? I'm starting to suspect there might be a simple conflict between them

[fayazara]

I can confirm this is an issue with Nuxt UI Module, I created fresh projects with

1 - Nuxt - Nuxt UI Module - intellisense does not work ❌
2 - Nuxt - Nuxt Tailwind Module - intellisense works ✅
3. NextJS - intellisense works ✅
4. Astro - intellisense works ✅
5. Vue Vite - intellisense works ✅

[sandros94]

1 - Nuxt - Nuxt UI Module - intellisense does not work ❌
2 - Nuxt - Nuxt Tailwind Module - intellisense works ✅

Just to make sure I'm on the same page of yours @fayazara: 1. is referring to Nuxt UI v3 (that uses Tailwind CSS V4) while 2. is referring to @nuxtjs/tailwindcss@6.12 (that uses Tailwind CSS v3), right? What about other points?

Just in case, I would like to remember everyone that Nuxt UI v3 uses an alpha release of Tailwind CSS v4. As such I would need your help with as many details as possible (OS, IDE, installed Tailwind CSS Extension, versions), or even better via a link with a full reproduction.

So far I'm struggling to pinpoint the issue (although, it happened myself once too, but haven't been able to reproduce since). I would also like not to open up a new upstream issue until I'm objectively sure about it, since they do already have a number of issues on this topic without a tangible pattern.

[benjamincanac]

Closing this as the issue lies on where you define the @import "tailwindcss";. It won't work well when doing it in app.vue but without issue in a CSS file. Added this to the docs: