N
Nuxt•2mo ago
Ponkhy

Custom Colors in Nuxt UI v3

Hello, I'm trying out Nuxt UI v3 now and I'm not able to introduce new colors like I've done in v2. In v2 I just have done the following: tailwind.config.ts: 
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        newcolor: {
          50: '#ffda7c',
          100: '#ffd466',
          200: '#ffcd50',
          300: '#ffc73a',
          400: '#ffc124',
          500: '#e6ae20',
          600: '#cc9a1d',
          700: '#b38719',
          800: '#997416',
          900: '#806112',
          950: '#664d0e',
        },
      },
    },
  },
}
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        newcolor: {
          50: '#ffda7c',
          100: '#ffd466',
          200: '#ffcd50',
          300: '#ffc73a',
          400: '#ffc124',
          500: '#e6ae20',
          600: '#cc9a1d',
          700: '#b38719',
          800: '#997416',
          900: '#806112',
          950: '#664d0e',
        },
      },
    },
  },
}
app.config.ts: 
export default defineAppConfig({
  ui: {
    primary: 'newcolor',
    gray: 'zinc',
  },
})
export default defineAppConfig({
  ui: {
    primary: 'newcolor',
    gray: 'zinc',
  },
})
Does anyone have an idea how I could resolve the issue?
4 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Ponkhy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI v3, the approach to custom colors has changed due to the migration to Tailwind CSS v4, which now follows a CSS-first configuration approach. Here's how you can implement your custom color in Nuxt UI v3: 1. First, remove your tailwind.config.ts file as it's no longer needed in the same way. 2. Instead, create or update your CSS file (typically in assets/css/main.css) and use the @theme directive to define your custom colors: 
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Your Font', sans-serif;
  
  --color-newcolor-50: #ffda7c;
  --color-newcolor-100: #ffd466;
  --color-newcolor-200: #ffcd50;
  --color-newcolor-300: #ffc73a;
  --color-newcolor-400: #ffc124;
  --color-newcolor-500: #e6ae20;
  --color-newcolor-600: #cc9a1d;
  --color-newcolor-700: #b38719;
  --color-newcolor-800: #997416;
  --color-newcolor-900: #806112;
  --color-newcolor-950: #664d0e;
}
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Your Font', sans-serif;
  
  --color-newcolor-50: #ffda7c;
  --color-newcolor-100: #ffd466;
  --color-newcolor-200: #ffcd50;
  --color-newcolor-300: #ffc73a;
  --color-newcolor-400: #ffc124;
  --color-newcolor-500: #e6ae20;
  --color-newcolor-600: #cc9a1d;
  --color-newcolor-700: #b38719;
  --color-newcolor-800: #997416;
  --color-newcolor-900: #806112;
  --color-newcolor-950: #664d0e;
}
3. Make sure to import this CSS file in your nuxt.config.ts: 
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})
4. Then update your app.config.ts to use the new color: 
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'newcolor',
      neutral: 'zinc'
    }
  }
})
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'newcolor',
      neutral: 'zinc'
    }
  }
})
Note that in Nuxt UI v3, the gray property has been renamed to neutral, and the configuration structure has changed slightly. This approach follows the CSS-first theming introduced in Nuxt UI v3 as documented in the UI Pro Docs Migration guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@178121051497168896> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Ponkhy
PonkhyOP•2mo ago
It doesn't work, the following element does not have the newcolor: 
<p class="text-(--ui-primary)">Test</p>
<p class="text-(--ui-primary)">Test</p>
Also what is the difference between these? @import 'tailwindcss' theme(static); @import 'tailwindcss';
Machomih
Machomih•2mo ago

Did you find this page helpful?