NuxtUI: Impossible to install
Hi,
I was previously using Tailwind and I just found out about NuxtUI.
I removed my @nuxtjs/tailwindcss and followed the official documentation for NuxtUI => https://ui.nuxt.com/getting-started/installation/nuxt
I did all that is mentioned, but I get this error
Here is my nuxt.config.ts
My /app/assets/css/main.css
I've been trying to make it work for hours, maybe someone has an idea of what I'm doing wrong 🙏
12 Replies
Hi @CG Seb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message you’re seeing:
indicates that the Tailwind CSS package is not installed in your project. Even though Nuxt UI handles much of the Tailwind configuration for you, you still need to have the tailwindcss package installed as a dependency in your project. This is also mentioned in the official Nuxt UI documentation:
Run the following command in your project root: or, if you use yarn: or, if you use pnpm: 2. Verify your main.css
Your
You do not need the
Your configuration looks correct: Summary:
You just need to install the
Official Nuxt UI Installation Docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
If you're using pnpm, ensure that you either setNuxt UI Installation Guide How to fix: 1. Install Tailwind CSSshamefully-hoist=truein your.npmrcfile or installtailwindcssin your project's root directory.
Run the following command in your project root: or, if you use yarn: or, if you use pnpm: 2. Verify your main.css
Your
/app/assets/css/main.css should look like:
This is correct as per the documentation.
3. No need for @nuxtjs/tailwindcssYou do not need the
@nuxtjs/tailwindcss module when using Nuxt UI, as Nuxt UI manages Tailwind for you.
4. Check your nuxt.config.tsYour configuration looks correct: Summary:
You just need to install the
tailwindcss package in your project. Once installed, the error should be resolved and Nuxt UI will work as expected with your current setup.
If you continue to have issues, make sure there are no typos in your file paths and that your dependency installation completed successfully.Official Nuxt UI Installation Docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@182470797850312704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai It fixed the first error but I still have this one
Let me check the knowledge base for you again. One moment! :books:
----------------------
The error:
suggests that there is an invalid or empty CSS declaration in your
<style> block within app.vue. This is not directly related to Nuxt UI, but rather to how CSS is written in your Vue component.
What to check:
- Open your app.vue file and look for any <style> blocks.
- Make sure there are no empty CSS rules or invalid declarations, such as:
- Remove any empty or malformed CSS blocks.
Example of a valid style block:
If you have an empty <style> block, you can safely remove it.
The knowledge sources do not explicitly mention this error, but based on the error message and standard Vue/Nuxt usage, this is the most likely cause. If the problem persists after cleaning up your CSS, please provide the contents of your app.vue file for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@182470797850312704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai It looks like this is wrong
When I remove it it works
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're correct—removing the following CSS block resolves the error:
The knowledge sources do not explicitly mention that this specific CSS would cause a "Pre-transform error: Invalid declaration," but they do show that Nuxt UI and Tailwind CSS expect you to use their utility classes and theming system for styling, rather than direct CSS overrides in your global styles. Nuxt UI applies background and text color to the
<body> using Tailwind's utility classes and CSS variables, for example:
This approach ensures compatibility with the design system and avoids conflicts or parsing errors that might arise from custom CSS, especially if there are syntax issues or if the CSS is not processed as expected by Tailwind or Vite plugins Nuxt UI Theme - Neutral.
If you need to customize the background color, it's recommended to do so using the Nuxt UI theming system or Tailwind utility classes, rather than direct CSS in your global stylesheet. This will help prevent similar errors and ensure your styles integrate smoothly with Nuxt UI.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@182470797850312704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
That can't cause this error! Could you send your
package.json and delete your node_modules and maybe lockfile to make sure the shamefully-hoist worked?Well I don't have the error anymore and my page is showing, but I my custom colors and classes I have in my tailwind.config.js are not working.
I tried removing node_modules mutiple times and it didn't work.
Here is my package.json
Thanks for the response 🙂
This is because NuxtUI now uses Tailwind v4 and the configuration file is no longer used by tailwind by default
https://tailwindcss.com/docs/functions-and-directives#config-directive
Functions and directives - Core concepts
A reference for the custom functions and directives Tailwind exposes to your CSS.
Great I will transform my config then thanks!