Nuxt•2mo ago

Nuxt 4 & Tailwind 4 IntelliSense Not Working

Can someone explain to me which settings I need for the curly underlines in Tailwind classes? Ideally for within <template> but also within <script> tags. I am using the import tailwindcss from '@tailwindcss/vite' plugin and not @nuxt/tailwind Thanks!

8 Replies

kapa.ai•2mo ago

Hi @.fondazione. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable Tailwind CSS IntelliSense (including features like curly underlines for invalid classes) in Nuxt 4 with Tailwind CSS v4, you should: 1. Install the Tailwind CSS IntelliSense VSCode extension
This is recommended for all Nuxt + Tailwind projects and provides class validation, autocompletion, and more. 2. Add recommended VSCode settings
In your .vscode/settings.json, add the following configuration to ensure IntelliSense works in both <template> and <script> tags:

   {
     "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 setup is recommended in the Nuxt UI documentation, but it applies to any Nuxt + Tailwind project, not just those using @nuxt/ui or @nuxt/tailwind modules. It ensures that Tailwind classes are recognized in your templates and scripts, and that IntelliSense features (like curly underlines for invalid classes) work as expected Nuxt UI Installation. 3. No need for special config for Tailwind v4
With Tailwind CSS v4, configuration is now CSS-first (using @theme in your CSS), but this does not affect IntelliSense setup. Just ensure your main CSS file (e.g., assets/css/main.css) includes:

   @import "tailwindcss";

   @import "tailwindcss";

and is referenced in your nuxt.config.ts:

   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })

   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })

Migration to v3 4. You do not need to use @nuxt/tailwind
The IntelliSense extension and settings work regardless of whether you use the Nuxt module or the Vite plugin for Tailwind. Summary:
Install the Tailwind CSS IntelliSense extension and add the recommended VSCode settings above. This will enable curly underlines and other IntelliSense features for Tailwind classes in both <template> and <script> tags in your Nuxt 4 + Tailwind 4 project, even when using the Vite plugin directly. If you still do not see curly underlines, make sure your CSS file is correctly imported and that VSCode is using the right workspace settings Nuxt UI Installation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

.fondazioneOP•2mo ago

I have these settings already. But I do not see the curly underlien lines @kapa.ai I have these settings but the curly lines are still missing

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, the recommended VSCode settings for Tailwind CSS IntelliSense in Nuxt projects are as follows:

{
  "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*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

These settings are suggested to enable IntelliSense features, including autocompletion and validation, for Tailwind classes in your project Nuxt UI Installation. However, the knowledge sources do not provide troubleshooting steps if curly underlines (error squiggles) are still missing after applying these settings. There is no explicit information about further requirements or known issues with Tailwind CSS IntelliSense in Nuxt 4 + Tailwind 4 projects using the Vite plugin. If you have already applied the recommended settings and the curly underlines are still not appearing, I'm sorry, but the knowledge sources do not contain enough information to diagnose or resolve this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

.fondazioneOP•2mo ago

I want intellisense in the vue files @kapa.ai I want intellisense in the vue files

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To enable Tailwind CSS IntelliSense (including autocompletion and validation) in your Vue files within a Nuxt 4 project, the official recommendation is to install the Tailwind CSS IntelliSense VSCode extension and add the following settings to your .vscode/settings.json:

{
  "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*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

These settings are designed to provide IntelliSense for Tailwind classes in both <template> and <script> tags in your Vue files Nuxt UI Installation. If you have already applied these settings and still do not see IntelliSense (such as curly underlines for invalid classes) in your Vue files, the knowledge sources do not provide further troubleshooting steps or additional configuration. There is no mention of extra requirements specific to Nuxt 4, Tailwind 4, or the Vite plugin approach. Summary:
- Use the recommended VSCode settings above. - Make sure the Tailwind CSS IntelliSense extension is installed and enabled. - The knowledge sources do not provide further troubleshooting if IntelliSense is still not working in your Vue files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Nuxt 4 & Tailwind 4 IntelliSense Not Working

Did you find this page helpful?