Nuxt•3mo ago

Nuxt UI breaks Tailwind styles

I’m not sure why I’m doing wrong as whatever it is I seem to be consistently doing it. Whenever I add NuxtUI to a project it’s usually a little bit into it and I have previously been using Tailwind. But once I add it I follow all the docs and then my site has no styles added from the previous Tailwind classes. I was always under the impression that NuxtUI worked alongside Tailwind. Any guidance would be great because a project I’m working on would be perfect with NuxtUI especially since the 4.0 update.

2 Replies

kapa.ai•3mo ago

Hi @Sul. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt UI is designed to work seamlessly with Tailwind CSS—they are tightly integrated, and Nuxt UI’s theming and component system are built on top of Tailwind. If you’re experiencing issues where your existing Tailwind styles stop working after adding Nuxt UI, it’s likely due to configuration or import order issues. Here are some key points and steps to ensure both work together: 1. Import Order in CSS
Make sure you import both Tailwind and Nuxt UI in your main CSS file, in this order:

   @import "tailwindcss";
   @import "@nuxt/ui";

   @import "tailwindcss";
   @import "@nuxt/ui";

This ensures Tailwind’s utilities and Nuxt UI’s component styles are both available and layered correctly.
Reference: Nuxt UI Installation Guide 2. Configure Nuxt to Use Your Main CSS
In your nuxt.config.ts, add your CSS file:

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     css: ['~/assets/css/main.css']
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     css: ['~/assets/css/main.css']
   })

Reference: Nuxt UI Installation Guide 3. No Need for Separate Tailwind Module
With Nuxt UI v4, you do not need to add @nuxtjs/tailwindcss as a separate module—Nuxt UI handles Tailwind integration internally. Adding both can cause conflicts or duplicated styles. 4. CSS-First Configuration
Tailwind v4 (used by Nuxt UI) uses a CSS-first approach. If you previously relied on tailwind.config.js, you should now define your theme tokens and customizations directly in your CSS using the @theme directive:

   @theme {
     /* Your custom tokens */
   }

   @theme {
     /* Your custom tokens */
   }

Reference: Nuxt UI Design System 5. Directory Structure and Content Scanning
If you use Tailwind classes in markdown or other non-Vue files, ensure Tailwind scans those files by adding the @source directive in your CSS:

   @source "../../../content/**/*";

   @source "../../../content/**/*";

Reference: Nuxt UI + Content Integration 6. Migration and Upgrades
If you’re upgrading from an older Nuxt or Tailwind setup, make sure to update any third-party configs (like tailwind.config.js) to match the new directory structure and CSS-first approach.
Reference: Nuxt 4 Upgrade Guide Note Summary:
Nuxt UI and Tailwind are meant to work together, but you must follow the new CSS-first configuration and import order. Remove any redundant Tailwind modules, ensure your CSS imports are correct, and migrate your theme customizations to CSS if you haven’t already. This should resolve the issue of Tailwind styles not applying after adding Nuxt UI. If you follow these steps and still have issues, double-check for conflicting modules or missing imports as described above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Nuxt UI breaks Tailwind styles

Did you find this page helpful?