Nuxt•2mo 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'],
})

12 Replies

kapa.ai•2mo 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•2mo ago

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

Shay Rosenfeld•2mo 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•2mo 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•2mo ago

specifically on this tab

suhaylmvOP•2mo ago

hey, thanks for helping out! I implemented what you said and I still don't get tailwind suggestions however I do get intellisense when opening the project in neovim so I think it must be editor issue

Shay Rosenfeld•2mo ago

Try to do File->Invalidate Caches. Also make sure you are on the last version of webstorm

suhaylmvOP•2mo ago

tried it and updated to 2024.3, and still doesn't work I have absolutely no idea why it's happening because when I open another project with vue and vite on webstorm, I get intellisense

Shay Rosenfeld•2mo ago

If you create a completely new nuxt project and install tailwind using nuxt-module, do you have this as well? also you can try deleting node modules and reinstalling without cache

suhaylmvOP•2mo ago

still doesn't work I'll have to use neovim I guess I'm considering opening an issue in a github repo, but idk if I should post it in nuxt or tailwindcss repo or webstorm's, idk

Shay Rosenfeld•2mo ago

for a new project, is it working? you can open a bug report on Jetbrains youtrack https://youtrack.jetbrains.com/issues/WEB

suhaylmvOP•2mo ago

no, I created a totally new project, added the next module and it didn't work thanks, I'll see if they can help me out

Gaming

Programming

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

Did you find this page helpful?