Nuxt•3mo ago

NuxtUI components are displayed without styling

Hey! I started exploring development with Nuxt4 and NuxtUI. I have kickstarted a project using the normal commands from official docs. However, the components I use from NuxtUI are displayed without any styling at all. I have searched some slight configuration changes through tutorials and other resources but it doesn't seem to help at all. I assume that it's something pretty straightforward, since I used only the default commands and configurations to create my project. Below I include the code for the basic parts to help with resolution along with the page in browser. Thanks in advance for any help! 🙏 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
  ]
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
  ]
})

assets/css/main.css

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

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

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layouts/default.vue

<template>
  <UApp>
    <!-- HEADER -->
    <UHeader class="justify-between">
      <template #left>
        <!-- The default link to the homepage with NuxtLink -->
      </template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />
      </template>
    
    </UHeader>

    <!-- MAIN CONTENT -->
    <UMain>
      <slot />
    </UMain>

    <!-- FOOTER -->
    <UFooter>
      <template #left>
          <!-- Dummy Copyright -->
      </template>

      <template #right>
          <!-- Dummy UButton -->
      </template>
    </UFooter>
  </UApp>
</template>

<template>
  <UApp>
    <!-- HEADER -->
    <UHeader class="justify-between">
      <template #left>
        <!-- The default link to the homepage with NuxtLink -->
      </template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />
      </template>
    
    </UHeader>

    <!-- MAIN CONTENT -->
    <UMain>
      <slot />
    </UMain>

    <!-- FOOTER -->
    <UFooter>
      <template #left>
          <!-- Dummy Copyright -->
      </template>

      <template #right>
          <!-- Dummy UButton -->
      </template>
    </UFooter>
  </UApp>
</template>

pages/index.vue

<template>
    <UButton>My Button</UButton>
    <div>
        <h1>Welcome to Your Nuxt 3 App</h1>
        <p>
        This is the home page. You can start editing it by modifying
        <code>app/pages/index.vue</code>.
        </p>
    </div>
</template>

<template>
    <UButton>My Button</UButton>
    <div>
        <h1>Welcome to Your Nuxt 3 App</h1>
        <p>
        This is the home page. You can start editing it by modifying
        <code>app/pages/index.vue</code>.
        </p>
    </div>
</template>

26 Replies

kapa.ai•3mo ago

Hi @lezaf_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you’ve set up most things correctly, but there are a couple of common reasons why Nuxt UI components might render without styling: 1. CSS File Not Loaded Globally You have created assets/css/main.css and imported both Tailwind and Nuxt UI CSS, which is correct:

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

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

However, you must ensure this CSS file is loaded globally in your Nuxt app. This is done by adding it to the css property in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
  ],
  css: ['~/assets/css/main.css'] // <-- This line is required!
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/tailwindcss',
  ],
  css: ['~/assets/css/main.css'] // <-- This line is required!
})

If you miss this step, the styles will not be applied to your components, and they will appear unstyled Nuxt UI Installation Guide. --- 2. Module Order and Redundancy You do not need to add both @nuxt/ui and @nuxtjs/tailwindcss to the modules array. The @nuxt/ui module already includes Tailwind CSS configuration for you. You can safely remove @nuxtjs/tailwindcss unless you have a specific reason to customize Tailwind separately Nuxt UI Installation Guide. --- 3. Wrapping with <UApp> You are correctly wrapping your layout with <UApp>, which is required for global config and overlays. --- 4. File Paths Double-check that your CSS file is at assets/css/main.css (not app/assets/css/main.css unless you have changed the default directory structure). --- Summary of Fix Update your nuxt.config.ts to include the CSS file:

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

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

Remove @nuxtjs/tailwindcss from modules unless you need it for custom configuration. --- After making these changes, restart your dev server. Your Nuxt UI components should now be styled correctly. If you still have issues, ensure there are no build errors and that your browser is not caching old assets. --- References:
- Nuxt UI Installation Guide - Nuxt UI Theme Customization ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Andrew Barney•3mo ago

hey you dont need nuxtjs/tailwindcss if you have @nuxt/ui and you have to add in your config the css path file

lezaf_OP•3mo ago

@Andrew Barney I updated my nuxt.config.ts with:

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui'
  ],
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui'
  ],
  css: ['~/assets/css/main.css']
})

and my main.css with:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  
}

And still nothing.

Andrew Barney•3mo ago

ur main.css has to be

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

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

@lezaf_ nuxt/ui by default uses tailwind v4

lezaf_OP•3mo ago

@Andrew Barney With this I get following error

[plugin:@tailwindcss/vite:generate:serve] Can't resolve 'tailwindcss' in '~/app/assets/css'

Yes, I understand that NuxtUI handles tailwind by default, and I have tried the default settings and setup from the docs but still can't make it work. 😕

Andrew Barney•3mo ago

delete node_modules and make sure u uninstalled the old package nuxtjs/tailwindcss and then reinstall all packages

lezaf_OP•3mo ago

So you suggest I shouldn't have either in my package.json tailwind import:

"dependencies": {
    "@nuxt/ui": "^4.0.0",
    "@nuxtjs/tailwindcss": "^6.14.0", // Should I remove this, too?
    "nuxt": "^4.1.2",
    "vue": "^3.5.21",
    "vue-router": "^4.5.1"
  },

"dependencies": {
    "@nuxt/ui": "^4.0.0",
    "@nuxtjs/tailwindcss": "^6.14.0", // Should I remove this, too?
    "nuxt": "^4.1.2",
    "vue": "^3.5.21",
    "vue-router": "^4.5.1"
  },

Andrew Barney•3mo ago

yes remove "@nuxtjs/tailwindcss":

lezaf_OP•3mo ago

@Andrew Barney It worked! It was the package.json entry that was conflicting. Thanks a lot! But why it was included if it conflicts with NuxtUI?

Andrew Barney•3mo ago

i assume because nuxtjs/tailwindcss uses old tailwind not all packages from the nuxt modules page are updated to nuxt 4 and latest packages maybe and it wasn't included, maybe you asked ai how to install tailwindcss?

lezaf_OP•3mo ago

Yeah I see, it's too soon, yet.

Andrew Barney•3mo ago

and it gave you that

lezaf_OP•3mo ago

Actually I didn't. I just run the commands from the docs, nothing more.

Andrew Barney•3mo ago

not sure, i was confused how to install tailwind too i still don't know how i can install tailwind by itself without nuxt/ui

lezaf_OP•3mo ago

I don't quite remember if in the Nuxt project cli commands, tailwindcss was in the list of modules to install along with nuxtui and I opt in there.

Andrew Barney•3mo ago

i don't like how nuxt/ui is, coming from react and i was using shadcn so i'm using reka-ui which nuxt/ui is built on top of and that's like radix-ui which shadcn is built on

lezaf_OP•3mo ago

Is it more mature as a component library? I chose NuxtUI because it's the official, but I could try another one if it worths

Andrew Barney•3mo ago

nuxtui is built on top of reka-ui are you just learning web dev or you're coming from react or some other framework?

lezaf_OP•3mo ago

I am experimenting with frameworks and my web background is a bit of Angular and Vue.

Andrew Barney•3mo ago

nice i have a long experience with react (nextjs) but i got annoyed how it works and i like how nuxt (vue) works

lezaf_OP•3mo ago

Ah, I see. So what would be your recommendation for component library in nuxt? reka-ui directly?

Andrew Barney•3mo ago

well since you're not coming from react then you will maybe like how nuxtui works, but you can look at how reka-ui is I don't like how nuxtui is because they have component variants and it's a little different to customize you have to customize in the config everything style related but in reka-ui if you look, you can customize where you use it always example: reka-ui

<script setup>
import { PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger />
    <PopoverAnchor />
    <PopoverPortal>
      <PopoverContent>
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

<script setup>
import { PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger />
    <PopoverAnchor />
    <PopoverPortal>
      <PopoverContent>
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

nuxt/ui

<template>
  <UPopover mode="hover">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

<template>
  <UPopover mode="hover">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

So for reka you can customize where you use it, you add class="bla bla bla" but for nuxt/ui in the nuxt config you have to make variants for each component and customize it you may find it cleaner in some cases, but maybe more annoying so it all depends on your perspective

lezaf_OP•3mo ago

Ok, I get your point! Great explanation with the examples. I'll maybe try both and decide, I guess! Thanks a lot for you help! 👐

Andrew Barney•3mo ago

np, if you ever have any questions you can dm i'll try to help you

lezaf_OP•3mo ago

yeah sure! thanks!

Gaming

Programming

NuxtUI components are displayed without styling

Did you find this page helpful?