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"

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

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

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

Nuxt•10mo ago•

12 replies

Viridian

Tailwind classes not applying while using Nuxt UI v3

class="font-bold"

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

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

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

Tailwind classes not applying while using Nuxt UI v3

Similar Threads

Tailwind classes not applying while using Nuxt UI v3

Similar Threads

Similar Threads

Similar Threads