Nuxt•7d ago

How do I use Tailwind colour palettes within NuxtUI components that accept a color?

I don't want to just use primary, secondary, etc In NuxtUI components such as the UBadge, I want the set color="rose" or color="indigo" for example

5 Replies

kapa.ai•7d ago

Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not explicitly document support for using arbitrary Tailwind color names (like "rose" or "indigo") directly in Nuxt UI components such as UBadge via the color prop. The documented approach for Nuxt UI is to use semantic color names like "primary", "secondary", "gray", etc., which are mapped in your app.config.ts file. For example:

export default defineAppConfig({
  ui: {
    primary: 'red',
    gray: 'neutral',
  }
})

export default defineAppConfig({
  ui: {
    primary: 'red',
    gray: 'neutral',
  }
})

This allows you to change the color palette globally, but only for the predefined semantic keys, not arbitrary Tailwind color names. Attempting to set color="rose" or color="indigo" in a Nuxt UI component is not shown as supported in the provided sources, and there is no mention of a way to extend the color prop to accept arbitrary Tailwind palette names in Nuxt UI components like UBadge. If you need more granular control, you may need to customize the component or use utility classes directly, but this is not covered in the knowledge sources provided. If you want to override or extend the theme, you can do so for the semantic keys in app.config.ts, but not for arbitrary Tailwind color names as direct props on Nuxt UI components How to dynamically select primary colour in Nuxt UI?. I'm sorry, but there's no information in the knowledge sources about using arbitrary Tailwind color names directly as the color prop in Nuxt UI components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Samouly.go•7d ago

after you define the colors in tailwind as mentioned here in the docs in nuxt config:

ui: {
      theme: {
          colors: [
              "samouly",  // Add your custom color here
          ],
      }
    },

ui: {
      theme: {
          colors: [
              "samouly",  // Add your custom color here
          ],
      }
    },

in app config:

  ui: {
      colors: {
          primary: "zinc",
          secondary: "purple",
          success: "emerald",
          info: "blue",
          warning: "yellow",
          error: "rose",
          neutral: "gray",
          samouly: "samouly", // your custom one, the above i override them defaults.
      },
}

  ui: {
      colors: {
          primary: "zinc",
          secondary: "purple",
          success: "emerald",
          info: "blue",
          warning: "yellow",
          error: "rose",
          neutral: "gray",
          samouly: "samouly", // your custom one, the above i override them defaults.
      },
}

now enjoy your custom color in color=""

Nuxt UI

Design System - Nuxt UI

Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.

UchuuOP•7d ago

Thanks worked

Samouly.go•7d ago

Don't mention it <3

Gaming

Programming

How do I use Tailwind colour palettes within NuxtUI components that accept a color?

Did you find this page helpful?