Nuxt•14h ago

Tailwind works, but doesn't show suggestions (intellisense) in a Nuxt project

Here's the relevant content inside the tailwind config file:

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
...

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
...

And here's the nuxt config file:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: ['@nuxtjs/tailwindcss'],
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: ['@nuxtjs/tailwindcss'],
})

5 Replies

kapa.ai•14h ago

Hi @suhaylmv. 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 CSS not showing suggestions (IntelliSense) in your Nuxt project, I can provide some guidance based on the information from the knowledge sources. First, it's important to note that you've correctly set up Tailwind CSS in your Nuxt project. The configuration in both your Tailwind config file and Nuxt config file looks correct. However, to enable IntelliSense, you need to make some additional configurations in your VSCode settings. Here are the steps to enable Tailwind CSS IntelliSense in your Nuxt project: 1. Install the Tailwind CSS IntelliSense (https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode if you haven't already. 2. Create or modify the .vscode/settings.json file in your project root and add the following configurations:

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

These settings will enable IntelliSense for Tailwind CSS classes in your project Installation - Nuxt UI (https://ui.nuxt.com/getting-started/installation#intellisense). 3. If you're using TypeScript for your Tailwind config (which is recommended), make sure to name your config file tailwind.config.ts and use the following format:

import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    // Your content configuration
  ]
}

import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    // Your content configuration
  ]
}

4. To enable IntelliSense on objects in your Single File Components (SFC) by prefixing with /*ui*/, add the following to your .vscode/settings.json:

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

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

This configuration will enable IntelliSense for Tailwind classes used in the ui prop and when prefixed with /*ui*/ Installation - Nuxt UI (https://ui.nuxt.com/getting-started/installation#intellisense). After making these changes, restart your VSCode and you should see Tailwind CSS suggestions (IntelliSense) working in your Nuxt project. If you're still experiencing issues, make sure that your project structure matches the paths specified in your Tailwind config's content array, and that you're using the latest versions of Nuxt and the Tailwind CSS module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14h ago

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

Shay Rosenfeld•7h ago

you don't need this:

postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

for css file path use this config inside nuxt.config.ts:

tailwindcss: {
    cssPath: '~/assets/css/tailwind.scss',
  }

tailwindcss: {
    cssPath: '~/assets/css/tailwind.scss',
  }

for content inside of tailwind config file I use this ususally: content: ['./src/**/*.{html,js,ts}'], because @nuxtjs/tailwindcss deals with all the regular pages

Shay Rosenfeld•7h ago

https://tailwindcss.com/docs/guides/nuxtjs#modules If you look at the documentation here, the postcss and autoprefixer are only needed if you don't install tailwind using the nuxt module

Install Tailwind CSS with Nuxt - Tailwind CSS

Setting up Tailwind CSS in a Nuxt project.

Shay Rosenfeld•7h ago

specifically on this tab

Gaming

Programming

Tailwind works, but doesn't show suggestions (intellisense) in a Nuxt project