Nuxt•5d ago

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

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

6 Replies

kapa.ai•5d ago

Hi @Viridian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're having issues with Tailwind CSS classes not applying in your Nuxt UI v3 project. Let's troubleshoot this issue based on the information provided. The Problem Your Tailwind classes like font-bold aren't applying, and your custom font defined in the @theme directive isn't working either. Possible Solutions 1. Check CSS Import Order Make sure your CSS imports are in the correct order. The Nuxt UI documentation recommends:

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

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

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

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

Note that you're using --font-site but Nuxt UI uses --font-sans by default. Try changing this to match the expected variable name. 2. Ensure Proper CSS File Registration Verify that your CSS file is properly registered in your nuxt.config.ts. Your configuration looks correct, but double-check the path to make sure it's pointing to the right location:

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

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

3. Use the ui Prop for Component Customization For Nuxt UI v3, component customization works through the ui prop and the Tailwind Variants API. For example:

<UButton :ui="{ base: 'font-bold' }">Button</UButton>

<UButton :ui="{ base: 'font-bold' }">Button</UButton>

This approach is different from v2, as mentioned in the migration guide. 4. Global Theme Configuration You can also set global theme configurations in your app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold'
      }
    }
  }
})

5. Font Registration For custom fonts, make sure they're properly registered. Nuxt UI integrates with Nuxt Fonts automatically, so you can declare your font in CSS:

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

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

But you need to make sure the font is actually available. You might need to import it first:

@font-face {
   font-family: 'Outfit';
   font-style: normal;
   font-weight: normal;
   src: url('../fonts/Outfit-Regular.ttf') format('ttf');
}

@font-face {
   font-family: 'Outfit';
   font-style: normal;
   font-weight: normal;
   src: url('../fonts/Outfit-Regular.ttf') format('ttf');
}

As mentioned in a Stack Overflow solution, proper font registration is important. Additional Recommendations 1. Make sure you've wrapped your app with the UApp component as you mentioned:

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

2. Consider adding VSCode settings for better Tailwind CSS IntelliSense:

"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

3. If you're using pnpm, ensure you've set shamefully-hoist=true in your .npmrc file or installed tailwindcss in your project's root directory. If these solutions don't resolve your issue, you might need to check for any conflicts between your modules or consider creating a minimal reproduction of the issue to share with the Nuxt community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

ViridianOP•5d ago

Solved because of some stupid scoped css issues 🤣 @kapa.ai I made an app.config.ts with this configuration:

export default defineAppConfig({
    ui: {
      colors: {
        primary: 'rose',
        neutral: 'zinc'
      }
    }
  })

export default defineAppConfig({
    ui: {
      colors: {
        primary: 'rose',
        neutral: 'zinc'
      }
    }
  })

But the theme colors aren't changing even after restarting the application. Why is this? I'm using @nuxt/ui

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I can see you're having trouble with changing theme colors in Nuxt UI v3. Let's look at what might be happening. Based on the knowledge sources, your configuration in app.config.ts looks correct for Nuxt UI v3. The colors should be defined under the ui.colors object as you've done:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'rose',
      neutral: 'zinc'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'rose',
      neutral: 'zinc'
    }
  }
})

However, there are a few potential reasons why your theme colors aren't changing: Possible Issues 1. Nuxt UI Version: Make sure you're using Nuxt UI v3. In v2, the configuration was different - colors were defined directly under the ui key without the colors object:

// Old v2 format (no longer works in v3)
ui: {
  primary: 'rose',
  gray: 'zinc'
}

// Old v2 format (no longer works in v3)
ui: {
  primary: 'rose',
  gray: 'zinc'
}

2. Hot Module Replacement: According to the Nuxt UI documentation, the color aliases can be configured at runtime, which means changes should apply without a full rebuild. However, sometimes a full restart is needed. 3. CSS Variables: Check if you're using the new CSS variable format in your components. In Nuxt UI v3, you should use design tokens like text-(--ui-primary) instead of direct color references like text-primary. 4. AppConfig Reactivity: The AppConfig is reactive, as mentioned in a Stack Overflow post, so changes should apply dynamically. Solutions to Try 1. Clear Cache: Try clearing your browser cache and Nuxt's cache (.nuxt directory). 2. Use Design Tokens: Make sure you're using the new design token format in your components:

<!-- Use this format in v3 -->
<div class="text-(--ui-primary)">Text in primary color</div>

<!-- Instead of this (v2 format) -->
<div class="text-primary">Text in primary color</div>

<!-- Use this format in v3 -->
<div class="text-(--ui-primary)">Text in primary color</div>

<!-- Instead of this (v2 format) -->
<div class="text-primary">Text in primary color</div>

3. Check Component Props: For components that accept a color prop, make sure you're using the semantic color names:

<UButton color="primary">Button</UButton>

<UButton color="primary">Button</UButton>

4. Verify Theme Configuration: If you've added custom colors, ensure they're also defined in your nuxt.config.ts under the ui.theme.colors array. If you're still experiencing issues after trying these solutions, it might be helpful to create a minimal reproduction of the problem to share with the Nuxt UI community for more specific assistance. Nuxt UI Theme Documentation provides more details on theme customization in v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

johntanzer•5d ago

Add shamefully hoist in .npmrc And run pnpm install

Gaming

Programming

Tailwind classes not applying while using Nuxt UI v3

Did you find this page helpful?