NuxtUI components are displayed without styling

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

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

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</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>
    <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>