N
Nuxt•3d ago
tuborg8801

Tailwind setup in nuxt

Hi i was trying to setup tailwindcss in my new nuxt project and i followed the nuxt module guide but i am not getting any intellisense suggestions in the .vue file but i have tried in a plain html and it’s working there
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @tuborg8801. 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 in your Nuxt project, you need to ensure a few things are set up correctly: 1. Install Tailwind CSS and Nuxt UI
Follow the official Nuxt UI installation guide, which includes Tailwind CSS by default: 
   npm install @nuxt/ui
   
   npm install @nuxt/ui
In your nuxt.config.ts: 
   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     css: ['~/assets/css/main.css']
   })
   
   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     css: ['~/assets/css/main.css']
   })
And in your assets/css/main.css: 
   @import "tailwindcss";
   @import "@nuxt/ui";
   
   @import "tailwindcss";
   @import "@nuxt/ui";
Nuxt UI Installation Guide 2. Install Tailwind CSS IntelliSense Extension
Make sure you have the Tailwind CSS IntelliSense extension installed in VSCode. 3. Configure VSCode for IntelliSense
Add the following settings to your .vscode/settings.json to ensure IntelliSense works in .vue files: 
   {
     "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*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
     ]
   }
VSCode Settings Reference 4. Restart VSCode
Sometimes, you need to restart VSCode for the settings and extension to take effect. If you have followed these steps and still do not see IntelliSense in your .vue files, double-check that your workspace is opened at the project root (where nuxt.config.ts and tailwind.config.js are located), and that there are no errors in the VSCode output panel related to the Tailwind CSS IntelliSense extension. If you are using pnpm, also ensure you have either set shamefully-hoist=true in your .npmrc or installed tailwindcss in your project root, as this can affect dependency resolution for the extension. These steps should resolve the issue and enable Tailwind CSS IntelliSense in your Nuxt .vue files. If the problem persists, the knowledge sources do not provide further troubleshooting steps. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@758918180932157441> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?