Tailwind works, but doesn't show suggestions (intellisense) in a Nuxt project
Here's the relevant content inside the tailwind config file:
And here's the nuxt config file:
12 Replies
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:
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:
4. To enable IntelliSense on objects in your Single File Components (SFC) by prefixing with /*ui*/
, add the following to your .vscode/settings.json
:
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:
----------------------<@460711970182660116> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
you don't need this:
for css file path use this config inside
nuxt.config.ts
:
for content
inside of tailwind config file I use this ususally:
content: ['./src/**/*.{html,js,ts}'],
because @nuxtjs/tailwindcss
deals with all the regular pageshttps://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 moduleInstall Tailwind CSS with Nuxt - Tailwind CSS
Setting up Tailwind CSS in a Nuxt project.
specifically on this tab
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
Try to do File->Invalidate Caches. Also make sure you are on the last version of webstorm
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
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
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
for a new project, is it working?
you can open a bug report on Jetbrains youtrack
https://youtrack.jetbrains.com/issues/WEB
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