Issue with pre-configured tailwind colors using Nuxt UI v3

[pliant knot]

Hi @blissful bough. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I understand you're having an issue with color configuration in Nuxt UI v3. Based on the knowledge sources, there have been significant changes to the theming system in Nuxt UI v3 compared to previous versions.

The Issue

In Nuxt UI v3, the theming system has been completely updated to work with Tailwind CSS v4, which takes a CSS-first configuration approach. This is different from how colors were configured in previous versions.

How to Fix It

The main change is that Nuxt UI v3 now uses CSS variables and the Tailwind Variants API for theming. Here's how to properly configure colors:

1. Update your CSS file to import Tailwind and Nuxt UI properly:

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

:root {
  --ui-primary: var(--ui-color-primary-500);
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-primary: var(--ui-color-primary-400);
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

2. Keep your app.config.ts configuration for color aliases:

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
      neutral: "zinc",
    },
  },
});

3. Use the new CSS variable syntax in your components:

<!-- Old way (v2) -->
<p class="text-primary">Hello</p>

<!-- New way (v3) -->
<p class="text-(--ui-primary)">Hello</p>

The key difference is that in v3, you need to use CSS variables like --ui-primary instead of direct color classes like text-primary. The DEFAULT shade that allowed you to write text-primary no longer exists in v3.

Additional Context

Nuxt UI v3 introduces a comprehensive design system with 7 color aliases (primary, secondary, success, info, warning, error, neutral). These colors are used to generate CSS variables that you can use in your components.

For components, you can still use the color prop with these semantic color names:

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

If you're migrating from v2, be aware that the gray color has been renamed to neutral, and you can no longer use Tailwind CSS colors directly in the color props - you must use the new aliases instead.

For more detailed information on the new theming system, check out the Nuxt UI theme documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: