Nuxt UI late install
Hi there, I've started a new project for Nuxt with @Nuxt/tailwindcss then I've decided to add @Nuxt/Ui everything seemed okay, but now when I'm trying out the UModal my portal doesn't show, I've searched for a reason in the DOM and it seems that Nuxt UI has the tailwind classes but tailwind didn't output them in the watch/build step,
In response i've added
to the tailwind.config.js file, it does work but I worry about a large output file since it will output every single class name used in nuxt ui, even if some components are not used,
Is there any other solution to my problem, or should I worry not about the output size?
thanks π
5 Replies
Hi @psyCOSMO. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your concern about the Nuxt UI components and Tailwind CSS output is valid. Let me address your question based on the information provided in the knowledge sources.
The issue you're experiencing with UModal not showing up properly is likely related to the smart safelisting feature of Nuxt UI. This feature is designed to keep the CSS bundle size as small as possible while ensuring that necessary classes are included.
According to the Nuxt UI documentation on Smart Safelisting, the module automatically detects when you use components with specific colors and safelists them for you. However, in some cases, you might need to manually safelist colors, especially when using dynamic colors or setting default colors in your
app.config.ts.
Instead of adding all Nuxt UI components to your Tailwind content configuration, which could indeed lead to a larger output file, you can try the following approach:
1. First, ensure that you've properly set up Nuxt UI in your nuxt.config.ts:
2. If you're using specific colors that aren't being detected automatically, you can safelist them in your nuxt.config.ts:
This approach allows you to safelist only the colors you're actually using, rather than including all possible classes.
3. If you're still experiencing issues with specific components, you might need to investigate if there are any conflicts with your existing Tailwind configuration or if there are any custom styles overriding the Nuxt UI styles.
Regarding your concern about output size, Nuxt UI is designed to work efficiently with Tailwind CSS. The smart safelisting feature should help keep the output size manageable by only including the classes that are actually used in your project.
If you're still concerned about the output size, you can use the built-in analyzer in Nuxt to check your bundle size:
This will give you insights into your bundle composition and help you identify if there are any unexpected size increases.
Remember, Nuxt UI is pre-configured to work with Tailwind CSS, including several plugins like @tailwindcss/forms, @tailwindcss/typography, and others, as mentioned in the Nuxt UI installation documentation.
If you continue to face issues, it might be worth checking if there are any conflicts between your manual Tailwind configuration and the one provided by Nuxt UI. In most cases, letting Nuxt UI handle the Tailwind configuration should be sufficient and efficient.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@257100970050191362> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Id lkike to have some human input as well
Do you have @nuxt/tailwindcss explicitly added in your modules array in the nuxt.config file?
You are correct, I've removed it later on, and forgot to close this issue, my bad didn't read the docs fully on installation.
Thank you for your input π