N
Nuxt3mo ago
suhaylmv

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
kapa.ai3mo 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
kapa.ai3mo ago
<@460711970182660116> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Shay Rosenfeld
Shay Rosenfeld3mo 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
Shay Rosenfeld3mo 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
Shay Rosenfeld3mo ago
specifically on this tab
No description
suhaylmv
suhaylmvOP3mo 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
Shay Rosenfeld3mo ago
Try to do File->Invalidate Caches. Also make sure you are on the last version of webstorm
No description
suhaylmv
suhaylmvOP3mo 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
Shay Rosenfeld3mo 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
suhaylmv
suhaylmvOP3mo 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
Shay Rosenfeld3mo ago
for a new project, is it working? you can open a bug report on Jetbrains youtrack https://youtrack.jetbrains.com/issues/WEB
suhaylmv
suhaylmvOP3mo 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

Did you find this page helpful?