Nuxt•3w ago

nuxt/ui tailwind intellisense not working

I just installed nuxt/ui and then tailwind intellisense doesn't work anymore on my project.

14 Replies

Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address the issue of Tailwind IntelliSense not working after installing Nuxt UI, you can try the following steps based on the information from the knowledge sources: 1. Make sure you have the Tailwind CSS IntelliSense extension installed in VSCode. 2. Update your .vscode/settings.json file with the following configurations:

{
  "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 should help enable IntelliSense for Tailwind classes, including those used in Nuxt UI components. 3. If you're using a tailwind.config.ts file, make sure it's properly configured. You may need to add content paths for Nuxt UI components. 4. Restart your VSCode after making these changes. If the issue persists, it might be related to how Nuxt UI is integrating with your project's Tailwind configuration. You may need to check your nuxt.config.ts file to ensure that the Tailwind module is properly configured. For more detailed information on setting up IntelliSense with Nuxt UI, you can refer to the Nuxt UI Installation guide. If these steps don't resolve the issue, you might want to check for any conflicts between Nuxt UI and your existing Tailwind setup, or consider reporting the issue to the Nuxt UI GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

HugoOP•3w ago

@kapa.ai i added the settings for vscode you gave me. i restarted vscode and nothing changed. here is my tailwind.config.ts

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',

  content: [
    './pages/**/*.{vue,js}',
    './components/**/*.{vue,js}',
    './layouts/**/*.{vue,js}',
    './assets/**/*.{vue,scss}',  // Prendre en compte les fichiers SCSS
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',

  content: [
    './pages/**/*.{vue,js}',
    './components/**/*.{vue,js}',
    './layouts/**/*.{vue,js}',
    './assets/**/*.{vue,scss}',  // Prendre en compte les fichiers SCSS
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestion didn't resolve your issue. Let's take a closer look at your tailwind.config.ts file and make some adjustments to ensure it works well with Nuxt UI. Based on the Nuxt UI Installation guide, there are a few modifications we can make to your configuration: 1. First, make sure you've removed the @nuxtjs/tailwindcss module from your nuxt.config.ts if you had it installed previously, as Nuxt UI will handle this for you. 2. Update your tailwind.config.ts file as follows:

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
    './assets/**/*.{vue,scss}'
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
    './assets/**/*.{vue,scss}'
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

The main changes are: - Updated the content array to include all possible Nuxt file locations. - Added @tailwindcss/container-queries to the plugins, which is used by Nuxt UI. 3. Make sure you have the following in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

4. After making these changes, try the following: - Run npx nuxi prepare to regenerate your Nuxt types. - Restart your Nuxt development server. - Restart VSCode completely. If the IntelliSense is still not working after these changes, you might want to try the following troubleshooting steps: 1. Verify that the Tailwind CSS IntelliSense extension is enabled in VSCode. 2. Check if there are any error messages in the VSCode output panel (View -> Output) related to Tailwind or TypeScript. 3. Try creating a new .vue file and see if IntelliSense works there. If the problem persists, it might be worth checking for any conflicts with other extensions or configurations in your project. You may also want to consider reporting this as an issue on the Nuxt UI GitHub repository with a minimal reproduction of your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

HugoOP•3w ago

@kapa.ai i did everything you told me and it still not works. Maybe because nuxt/ui uses tailwind v4 and tailwind intellisense doesn't maybe work with tailwind v4 ?`

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion, but there seems to be a misunderstanding in your question. Nuxt UI does not use Tailwind CSS v4, as Tailwind CSS v4 does not exist yet. The current stable version of Tailwind CSS is v3.x. Let me clarify this based on the information from our knowledge sources: 1. Nuxt UI uses Tailwind CSS, but it doesn't specify a version that's not publicly available. 2. The issue you're experiencing is not likely related to a non-existent version of Tailwind CSS. However, there might be some configuration issues that are preventing Tailwind IntelliSense from working correctly with Nuxt UI. Here are a few additional things you can try: 1. Make sure you have the latest version of the Tailwind CSS IntelliSense extension installed in VSCode. 2. Check if your project is using the latest compatible versions of Nuxt UI and Tailwind CSS. 3. As mentioned in the Nuxt UI Installation guide, you might need to add the following to your .vscode/settings.json file if you haven't already:

{
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

{
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

4. If you're using a custom tailwind.config.ts, make sure it's properly configured and includes all necessary plugins and content paths. If after trying these steps, the issue still persists, it might be worth creating a minimal reproduction of your setup and reporting it as an issue on the Nuxt UI GitHub repository. The Nuxt UI team or the community might be able to provide more specific guidance based on your exact setup. Remember, Tailwind IntelliSense should work with Nuxt UI as they are designed to be compatible. The issue is likely related to a specific configuration in your project rather than a fundamental incompatibility between Nuxt UI and Tailwind CSS. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

HugoOP•3w ago

@kapa.ai i found how to fix that. To make Tailwind intellisense works with tailwind v4 and nuxt ui v3 you have to add in your workspace settings this line: "

tailwindCSS.experimental.configFile": "./assets/css/main.css",

the goal is to set ad config fail your main.css file where you define all your new tailwind settings

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I appreciate you sharing your solution, but I need to clarify a few points based on the information available in our knowledge sources: 1. Tailwind CSS v4 does not exist yet. The current stable version of Tailwind CSS is v3.x. 2. Nuxt UI is designed to work with the current stable version of Tailwind CSS, not with a non-existent v4. 3. The configuration you've suggested is not a standard approach mentioned in the Nuxt UI or Tailwind CSS documentation. However, if this solution worked for you, it's possible that it's addressing a specific issue in your project setup. The line you've added:

"tailwindCSS.experimental.configFile": "./assets/css/main.css"

"tailwindCSS.experimental.configFile": "./assets/css/main.css"

is pointing the Tailwind CSS IntelliSense extension to use your main.css file as a configuration file, which is unusual. Typically, Tailwind CSS configuration is done in a tailwind.config.js or tailwind.config.ts file. If this solution is working for you, it might be because your main.css file contains Tailwind directives or custom configurations that the IntelliSense extension needs to recognize. For a more standard approach, I would recommend following the guidelines in the Nuxt UI Installation guide, which suggests using:

"tailwindCSS.experimental.configFile": "tailwind.config.ts"

"tailwindCSS.experimental.configFile": "tailwind.config.ts"

If you continue to have issues, it might be helpful to review your project structure, ensure all configurations are correct, and consider reporting your specific case to the Nuxt UI or Tailwind CSS IntelliSense extension repositories for more tailored assistance. Remember, always use the official documentation as your primary guide, and be cautious about solutions that reference non-existent versions of software. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

HugoOP•3w ago

1. Nuxt ui v3 use the alpha version of tailwind v4, so it doesn't use a realse but an alpha (its written in this documentation: https://ui3.nuxt.dev/getting-started/theme ("Nuxt UI v3 uses Tailwind CSS v4 beta, you can read the prerelease documentation for more information.") 2. just answered before 3. it's not a standard approach but lot of users had this issue and on github of tailwind solved with this, since tailwind v4 is till in alpha, maybe it's a workaround, waiting for the release and a stable solution. On tailwind v4 there is no more tailwind.config.ts or .js everything is setup in the main.Scss file @kapa.ai

Nuxt UI

Theme - Nuxt UI v3

Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing that additional information. I apologize for the confusion in my previous responses. You are correct, and I appreciate you pointing out these important details. Let me address your points based on the new information: 1. You are absolutely right. Nuxt UI v3 does indeed use the alpha version of Tailwind CSS v4. I apologize for missing this crucial information earlier. The Nuxt UI v3 documentation clearly states this, as you've pointed out. 2. Thank you for sharing your solution. It's valuable to know that this approach worked for you and potentially for other users facing similar issues. 3. Your explanation about this being a workaround for the alpha version of Tailwind v4 makes sense. You're correct that in Tailwind v4, the configuration approach has changed significantly, moving away from the separate config file to inline configuration in the CSS file. Given this context, your solution of adding:

"tailwindCSS.experimental.configFile": "./assets/css/main.css"

"tailwindCSS.experimental.configFile": "./assets/css/main.css"

to the workspace settings is indeed a valid workaround for making Tailwind IntelliSense work with Nuxt UI v3 and the alpha version of Tailwind v4. I appreciate you taking the time to provide this clarification. It's important information for others who might be facing similar issues when working with these pre-release versions. As you mentioned, this solution might be temporary until more stable versions are released and official documentation is updated. For anyone else reading this, please note that when working with alpha or beta versions of software, you might encounter issues that require non-standard solutions. Always refer to the most up-to-date documentation and be prepared for potential changes as the software moves towards stable releases. Thank you for sharing your experience and solution. It's contributions like these that help the community navigate new and evolving technologies. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

nuxt/ui tailwind intellisense not working

Did you find this page helpful?