N
Nuxt•2mo ago
eyJOdnJHb25uYSI6Imd2VXVwIn0=

No Tailwind-Extension suggestions with Nuxt?

Hay, Using a fresh Nuxt project with NuxtUI v3 (npx nuxi init -t ui <app>) I get no tailwind suggestions at all. While trying solutions from here https://github.com/tailwindlabs/tailwindcss-intellisense/issues/561, I noticed that there is no ".nuxt/tailwind.config.cjs" at all. What am I doing wrong? Why is the extension doing nothing in Nuxt?
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @eyJOdnJHb25uYSI6Imd2VXVwIn0=. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with Tailwind CSS IntelliSense not working in a fresh Nuxt project with NuxtUI v3, there are a few things we can check and configure: 1. First, make sure you have the Tailwind CSS IntelliSense (https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension installed in VSCode. 2. The absence of a ".nuxt/tailwind.config.cjs" file is normal, as Nuxt UI uses a different configuration approach. Instead, you should focus on configuring your VSCode settings. 3. To enable IntelliSense for Tailwind classes, you need to add some configurations to your VSCode settings. Create or modify the .vscode/settings.json file in your project root and add the following: 
{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.experimental.classRegex": [
    **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
    **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}
{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.experimental.classRegex": [
    **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
    **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}
These settings are recommended by the Nuxt UI documentation for proper IntelliSense functionality Nuxt UI IntelliSense (https://ui.nuxt.com/getting-started/installation#intellisense). 4. If you're using a TypeScript configuration for Tailwind, make sure your tailwind.config.ts file is properly set up. Here's an example: 
import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}
import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}
5. Nuxt UI automatically installs and configures the @nuxtjs/tailwindcss module for you. You don't need to manually install or configure it in most cases Nuxt UI Modules (https://ui.nuxt.com/getting-started/installation#modules). 6. If you're still not seeing suggestions, try restarting your VSCode after making these changes. If you've followed these steps and are still experiencing issues, it might be worth checking if there are any conflicts with other extensions or if there are any error messages in the VSCode output panel for the Tailwind CSS IntelliSense extension. Remember, the Tailwind configuration in Nuxt projects, especially with Nuxt UI, is handled differently compared to standard Tailwind setups, which is why you don't see the ".nuxt/tailwind.config.cjs" file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@234662458638336000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eyJOdnJHb25uYSI6Imd2VXVwIn0=
eyJOdnJHb25uYSI6Imd2VXVwIn0=OP•2mo ago
@kapa.ai Nothing you provided helps. I even tried adding 
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: [
    'components/**/*.{vue,js,ts}',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'pages/*.vue',
    'composables/**/*.{js,ts}',
    'plugins/**/*.{js,ts}',
    'App.{js,ts,vue}',
    'app.{js,ts,vue}',
    'Error.{js,ts,vue}',
    'error.{js,ts,vue}',
    'content/**/*.md',
  ],
}
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: [
    'components/**/*.{vue,js,ts}',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'pages/*.vue',
    'composables/**/*.{js,ts}',
    'plugins/**/*.{js,ts}',
    'App.{js,ts,vue}',
    'app.{js,ts,vue}',
    'Error.{js,ts,vue}',
    'error.{js,ts,vue}',
    'content/**/*.md',
  ],
}
And restarting vs code, reinstalling the extension.
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestions didn't resolve your issue. Let's try to troubleshoot this further. Given that you've already tried the common solutions, including adding a comprehensive content array to your tailwind.config.ts, there might be a few other things to consider: 1. First, make sure you're using the latest version of the Tailwind CSS IntelliSense extension. You can check this in your VSCode extensions panel. 2. The issue might be related to the vue-tsc version. As noted in a recent Nuxt GitHub issue, there's a compatibility problem with vue-tsc version 2: Nuxt GitHub Issue (https://github.com/nuxt/nuxt/pull/26083) If you're using vue-tsc version 2, try downgrading to version 1.8.8 or the latest 1.x version. 3. Another potential issue could be related to the Nuxt configuration. Try adding the following to your nuxt.config.ts file: 
   export default defineNuxtConfig({
     // ... other config
     typescript: {
       shim: false
     }
   })
   
   export default defineNuxtConfig({
     // ... other config
     typescript: {
       shim: false
     }
   })
This disables the TypeScript shim, which has been known to cause issues with IntelliSense in some cases. 4. If you're using custom Tailwind classes or arbitrary values, you might need to add additional configuration to your .vscode/settings.json: 
   {
     "tailwindCSS.experimental.classRegex": [
       **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
       **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
     ],
     "tailwindCSS.classAttributes": [
       "class",
       "className",
       "ngClass",
       "ui",
       "active-class",
       "inactive-class"
     ]
   }
   
   {
     "tailwindCSS.experimental.classRegex": [
       **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
       **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
     ],
     "tailwindCSS.classAttributes": [
       "class",
       "className",
       "ngClass",
       "ui",
       "active-class",
       "inactive-class"
     ]
   }
This configuration is recommended by Nuxt UI for better IntelliSense support Nuxt UI Link Component (https://ui.nuxt.com/components/link#intellisense). 5. Lastly, there's a known issue with the vue configuration in nuxt.config.ts. If you have the following in your config, try removing it: 
   vue: {
     features: {
       customElement: true
     }
   }
   
   vue: {
     features: {
       customElement: true
     }
   }
This was identified as a potential cause for styling issues in dev mode GitHub Issue Comment (https://github.com/nuxt/nuxt/issues/29311). If none of these solutions work, it might be worth creating a minimal reproduction of your project and opening an issue on the Nuxt UI GitHub repository. The maintainers might be able to provide more specific guidance based on your exact setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@234662458638336000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Want results from more Discord servers?
Add your server