N
Nuxt•20h ago
Anto'

How to add colors from tailwind to nuxt ui ?

Hello ! I want to know how i can add like purple tailwind default colors to nuxt ui badge ?
2 Replies
kapa.ai
kapa.ai•20h ago
Hi @Anto'. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add Tailwind's default colors (like purple) to Nuxt UI components such as the Badge, you need to map the semantic color alias (e.g., primary, secondary, etc.) to the Tailwind color you want in your configuration. Here’s how you can do it: 1. Assign Tailwind Color to a Semantic Alias
In your app.config.ts, set the desired semantic color (e.g., secondary) to Tailwind's purple: 
   export default defineAppConfig({
     ui: {
       colors: {
         secondary: 'purple'
       }
     }
   })
   
   export default defineAppConfig({
     ui: {
       colors: {
         secondary: 'purple'
       }
     }
   })
2. Use the Semantic Alias in the Badge
Now, use the color prop with the alias you configured (e.g., secondary) in your Badge component: 
   <template>
     <UBadge color="secondary">Badge</UBadge>
   </template>
   
   <template>
     <UBadge color="secondary">Badge</UBadge>
   </template>
This will apply Tailwind's purple color to the Badge, as secondary now points to purple in your theme configuration. 3. You Can Also Use Other Aliases
You can assign any Tailwind color to any of the semantic aliases (primary, secondary, success, etc.) in the same way. Just make sure the color exists in your Tailwind theme. Note:
You cannot use arbitrary Tailwind color names directly in the color prop (e.g., color="purple" will not work). You must map the semantic alias to the Tailwind color in your config first Customize design system. Example for multiple colors: 
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      secondary: 'purple', // Tailwind's purple
      neutral: 'zinc'
    }
  }
})
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      secondary: 'purple', // Tailwind's purple
      neutral: 'zinc'
    }
  }
})
Now, <UBadge color="secondary">Badge</UBadge> will use Tailwind's purple color. For more details, see the Nuxt UI Design System Colors documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•20h ago
<@141085430098427904> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?