#Custom color Nuxt UI Pro 3

8 messages · Page 1 of 1 (latest)

warped tangleBOT
#

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

#

To add custom colors like pink in Nuxt UI Pro 3, in addition to the default colors like success and warning, you can follow these steps:

  1. First, define your custom color in your tailwind.config.ts file. Make sure to include all the shades from 50 to 950:
export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        pink: {
          50: '#fdf2f8',
          100: '#fce7f3',
          200: '#fbcfe8',
          300: '#f9a8d4',
          400: '#f472b6',
          500: '#ec4899',
          600: '#db2777',
          700: '#be185d',
          800: '#9d174d',
          900: '#831843',
          950: '#500724'
        }
      }
    }
  }
}
  1. Then, you need to safelist the new color in your nuxt.config.ts file to ensure Tailwind generates the necessary CSS classes:
export default defineNuxtConfig({
  ui: {
    safelistColors: ['pink']
  }
})
  1. Now you can use the pink color in your components, for example:
<UButton color="pink">Pink Button</UButton>

Remember that you need to define all shades from 50 to 950 for your custom color, as most of them are used in the components' config.

For more detailed information on customizing colors and theming in Nuxt UI, you can refer to the Theming documentation.

Getting Started > Theming

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

#

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

river raven
#

<@&1298358436202942538> with nuxt ui pro v3 we don't have tailwind.config file, juse a main.css file

#

@warped tangle with nuxt ui pro v3 we don't have tailwind.config file, juse a main.css file

warped tangleBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You're absolutely correct, and I apologize for the confusion in my previous answer. With Nuxt UI Pro v3, the approach to customization has indeed changed. Let me provide you with the correct information based on the latest Nuxt UI Pro v3 documentation.

In Nuxt UI Pro v3, we no longer use a tailwind.config.ts file for customization. Instead, we use a CSS-first approach with a main.css file. Here's how you can add a custom color like pink:

  1. In your assets/css/main.css file, you'll use the @theme directive to define your custom colors:
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
}
  1. Make sure this CSS file is imported in your Nuxt configuration:
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})
  1. You'll still need to safelist the new color in your nuxt.config.ts file:
export default defineNuxtConfig({
  ui: {
    safelistColors: ['pink']
  }
})

This new approach aligns with Tailwind CSS v4's CSS-first configuration method, which is used by Nuxt UI v3. It simplifies the process of adding custom colors and other theme customizations.

For more details on this new approach, you can refer to the UI Pro Docs Migration guide.