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',
  ]
})

// 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";

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

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

app.vue

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

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

<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>

<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>

<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>

NuxtUI components are displayed without styling

nuxt.config.ts

assets/css/main.css

app.vue

layouts/default.vue

pages/index.vue

Similar Threads

Similar Threads

Similar Threads