NuxtN
Nuxt•9mo ago
Viridian

Tailwind classes not applying while using Nuxt UI v3

I'm running into some strange behaviors with Nuxt, using NuxtUI v3.

I followed the installation guide on the Nuxt site (including wrapping <NuxtPage> in <UApp>). Using components like <UCard> works and displays, but trying to apply classes like class="font-bold" doesn't do anything. I also tried adding a font in my theme, but trying to apply those doesn't result in anything either.

export default defineNuxtConfig({
  // https://nuxt.com/modules
  modules: [
    '@nuxthub/core',
    '@nuxt/eslint',
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
    'nuxt-auth-utils',
  ],

  css: ['~/assets/css/main.css'],


/* app/assets/css/main.css */

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

@theme {
    --font-site: 'Outfit', sans-serif;
}


I'm not sure what I'm doing wrong, haha
Was this page helpful?