Nuxt•2mo ago

How to get TailwindCSS IntelliSense working in NuxtUI v3?

How to get TailwindCSS IntelliSense working in NuxtUI v3 since it uses TailwindCSS v4 alpha? I already have tailwindcss-intellisense switched to Pre-Release version

10 Replies

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 get TailwindCSS IntelliSense working in NuxtUI v3, you need to make some configurations in your VSCode settings. Here are the steps: 1. Install the Tailwind CSS IntelliSense (https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode. 2. Add the following to your .vscode/settings.json file:

{
  "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",
    "active-class",
    "inactive-class"
  ]
}

{
  "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",
    "active-class",
    "inactive-class"
  ]
}

These settings will enable IntelliSense for Tailwind classes in various contexts, including the ui prop and custom configurations Source (https://ui.nuxt.com/getting-started/installation#intellisense). 3. If you're using a TypeScript configuration for Tailwind, make sure your tailwind.config.ts file is set up correctly:

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'
  ]
}

Source (https://ui.nuxt.com/getting-started/installation#intellisense) 4. For IntelliSense to work with the ui prop in your components, you can use the /*ui*/ prefix:

<template>
  <UCard :ui="ui" />
</template>

<script setup lang="ts">
const ui = /* ui */ {
  background: 'bg-white dark:bg-slate-900'
}
</script>

<template>
  <UCard :ui="ui" />
</template>

<script setup lang="ts">
const ui = /* ui */ {
  background: 'bg-white dark:bg-slate-900'
}
</script>

Source (https://ui.nuxt.com/getting-started/installation#intellisense) These configurations should help you get TailwindCSS IntelliSense working with NuxtUI v3. However, it's important to note that the knowledge sources provided don't specifically mention TailwindCSS v4 alpha or any special configurations for it. If you're encountering specific issues related to TailwindCSS v4 alpha, you might need to consult the latest Tailwind CSS documentation or the NuxtUI GitHub repository for more up-to-date information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

eyJOdnJHb25uYSI6Imd2VXVwIn0=OP•2mo ago

man.. working without IntelliSense is aids..

UnRunDead•2mo ago

I have the same issue, read through the docs and some stack overflow posts but nothing works so far on my side. Did you have any luck?

Cake•2mo ago

- make sure you have a config file in your root - try upgrading/downgrading the tailwind vscode extension

eyJOdnJHb25uYSI6Imd2VXVwIn0=OP•2mo ago

I have tailwind.config.ts in my root. Tried both current and pre-release versions of the extension. No solution so far

UnRunDead•2mo ago

yeah same for me, tried also with .js and other supported tailwind config files, because in github there are some issues with v4 and typescript

hiimmox•2mo ago

Can you post your configs? Did you configure the content correctly? tw autocomplete works fine in all projects ive worked on

UnRunDead•2mo ago

For me it looks like the following (Note: I removed all unnecessary config objects which should not be relevant to that) package.json

"dependencies": {
    "@nuxt/ui": "^3.0.0-alpha.7",
  },
  "devDependencies": 
    "tailwindcss": "^4.0.0-alpha.29"
  }

"dependencies": {
    "@nuxt/ui": "^3.0.0-alpha.7",
  },
  "devDependencies": 
    "tailwindcss": "^4.0.0-alpha.29"
  }

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
});

import { defineNuxtConfig } from 'nuxt/config';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
});

tailwind.config.ts

import type { Config } from 'tailwindcss';

export default {
  darkMode: 'class',
  content: ['./index.html', './**/*.vue'],
} satisfies Config;

import type { Config } from 'tailwindcss';

export default {
  darkMode: 'class',
  content: ['./index.html', './**/*.vue'],
} satisfies Config;

.vscode/settings.json

{
        "tailwindCSS.experimental.configFile": "tailwind.config.ts",
        "files.associations": {
            "*.css": "tailwindcss"
        },
        "editor.quickSuggestions": {
            "strings": true
        },
        "tailwindCSS.experimental.classRegex": [
            ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
            ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
        ],
        "tailwindCSS.classAttributes": [
            "class",
            "className",
            "ngClass",
            "ui",
            "active-class",
            "inactive-class"
        ]
}

{
        "tailwindCSS.experimental.configFile": "tailwind.config.ts",
        "files.associations": {
            "*.css": "tailwindcss"
        },
        "editor.quickSuggestions": {
            "strings": true
        },
        "tailwindCSS.experimental.classRegex": [
            ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
            ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
        ],
        "tailwindCSS.classAttributes": [
            "class",
            "className",
            "ngClass",
            "ui",
            "active-class",
            "inactive-class"
        ]
}

Tailwind CSS IntelliSense: v0.13.45 (pre-release)

hiimmox•2mo ago

Ah, I havent tried out TW 4 or the intellisense pre-release. That might be your problem, I dont know

Gaming

Programming

How to get TailwindCSS IntelliSense working in NuxtUI v3?