Nuxt•2w ago

Help with Tailwind InteliSense in VSCode IDE

I am using VSCode with Tailwind CSS InteliSense extension. I am not getting any intelisense for tailwind in this project. in my other projects the intelisense works just fine (note they all use the nuxt/tailwind module) I followed this setup guide: https://tailwindcss.com/docs/installation/framework-guides/nuxt for this project I wanted to use Tailwind V4 with Nuxt here is a gist that includes all necessary information such as configurations files and workspace folder-tree: https://gist.github.com/YassaaaTU/c186674afc75042e1cd10429744500cc

Tailwind CSS IntelliSense - Visual Studio Marketplace

Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

Gist

Nuxt + TailwindCSS v4 config files

Nuxt + TailwindCSS v4 config files. GitHub Gist: instantly share code, notes, and snippets.

23 Replies

kapa.ai•2w ago

Hi @Yassaaa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, I can help you with your Tailwind CSS IntelliSense issue in VSCode for your Nuxt project with Tailwind v4. VSCode Settings for Tailwind IntelliSense The knowledge sources recommend adding specific settings to your VSCode configuration for proper Tailwind CSS IntelliSense functionality. Add the following to your .vscode/settings.json file:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

This configuration is recommended in both the Nuxt UI installation guide for Vue and Nuxt UI installation guide for Nuxt. Tailwind CSS v4 Configuration Since you're using Tailwind CSS v4 with Nuxt, there are some important considerations: 1. CSS Import Format: For Tailwind v4, you should use the following format in your CSS file:

   @import "tailwindcss" theme(static);

   @import "tailwindcss" theme(static);

The theme(static) is required since Tailwind CSS v4.0.8 introduced a breaking change to only expose used CSS variables. 2. Source Directive: If you're having issues with Tailwind not detecting classes in certain files, you might need to use the @source directive in your CSS file:

   @source "../../../content";
   /* Or if not using compatibilityVersion: 4 */
   @source "../../content";

   @source "../../../content";
   /* Or if not using compatibilityVersion: 4 */
   @source "../../content";

This is mentioned in the Nuxt UI theme documentation. 3. Slow Build Issues: There was a reported issue with Tailwind >=4.0.10 having slow builds on Vercel, which was related to directories being scanned. If you're experiencing slow builds, you might need to specify your source files explicitly as mentioned in a GitHub issue. 4. Directory Structure Changes: If you've upgraded to Nuxt 4, remember to update your Tailwind configuration to match the new directory structure as mentioned in a GitHub PR. Make sure your Tailwind configuration is correctly set up to scan all the necessary files in your project structure. Check that your CSS imports are correctly formatted for Tailwind v4, and that your VSCode settings are properly configured for the IntelliSense extension. I hope this helps resolve your IntelliSense issues. If you continue to have problems, you might want to check if there are any conflicts with other extensions or if your Tailwind configuration needs further adjustments. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@125244165704384512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Denish•2w ago

@Yassaaa (Ping me if u reply pls) i would not suggest using tailwind.config.ts with tailwind v4

YassaaaOP•2w ago

why is that? what would should I use to configure tailwind? 🤔

Denish•2w ago

in the css file itself using new directives, like source, plugins, etc

YassaaaOP•2w ago

I see, yea I saw that. I am using tailwind.config.ts only to apply the flyonui plugin with content:

    content: [
        './node_modules/flyonui/dist/js/*.js',
        './app/**/*.{vue,js,ts}'
    ],

    content: [
        './node_modules/flyonui/dist/js/*.js',
        './app/**/*.{vue,js,ts}'
    ],

dont know if it can be done directly in the css file itself

mikesynan•2w ago

I saw recently the config file is no longer reccomended as well

mikesynan•2w ago

https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration

Tailwind CSS v4.0

We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

Denish•2w ago

and ignore .nuxt folder from tailwindcss intellisense extension

Denish•2w ago

also ignore build and output too, since extension is not able to use gitignore (in my case)

Denish•2w ago

in your gist, i saw this, this is how you define config, in css file, so taiwlind.config.ts is no longer needed

YassaaaOP•2w ago

ok I excluded the .nuxt folder. ah I see you are right. what about this './app/**/*.{vue,js,ts}' does tailwind now include this automatically?

Denish•2w ago

not needed, you should add tailwind into nuxt config, it will use module graph

YassaaaOP•2w ago

you mean as a plugin?

Denish•2w ago

yes, its already added (from your gist)

Denish•2w ago

reload vscode and check

YassaaaOP•2w ago

I did all that but for some reason the intelisense is still not working ( i just relaunched vscode and refreshed the extensions) if I go to a project where tailwind was installed as a nuxt module (tailwindv3) then the intelisense works I might have messed up the tailwind v4 install? I tried cleaning the project (deleted .nuxt, node_modules etc...) but it did not help

Denish•2w ago

would it be ok for you to share anydesk? i could not know actual issue without looking at what;s happening

YassaaaOP•2w ago

dont have anydesk but I can share screen if that also works for you

Denish•2w ago

sure if possible then you can download anydesk 3mb (works without installation) but how would you share screen?

YassaaaOP•2w ago

is thera a voice chat in this server or should I just call you on discord directly? I don't like anydesk sorry

Denish•2w ago

theres no voice chat ehre, just call directly

YassaaaOP•2w ago

im in the call

Gaming

Programming

Help with Tailwind InteliSense in VSCode IDE

Did you find this page helpful?