N
Nuxt•3w ago
Hugo

Nuxt ui Custom Color doesn't work

I'm trying to create a custom color for nuxt ui. i defined on tailwind config my primary color. and it nuxt ui wont create the color variables. do you have any idea ? 
 tailwind.config.ts

import type { Config } from 'tailwindcss'
const designSystem = require('./tailwind.ds.js');

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    extend: {
      colors:{
        primary: {
          DEFAULT: "#fb991c" ,
          '50': '#fff8eb',
          '100': '#feeac7',
          '200': '#fdd48a',
          '300': '#fcb74d',
          '400': '#fb991c',
          '500': '#f5780b',
          '600': '#d95506',
          '700': '#b43809',
          '800': '#922b0e',
          '900': '#78240f',
          '950': '#450f03',
        },
        secondary: {
          DEFAULT: "#50a787" ,
          '50': '#f0f9f5',
          '100': '#daf1e5',
          '200': '#b8e2cf',
          '300': '#89ccb1',
          '400': '#50a787',
          '500': '#369374',
          '600': '#26755d',
          '700': '#1e5e4c',
          '800': '#1a4b3d',
          '900': '#163e33',
          '950': '#0c221d',
        },
        gray: {
          '50': '#f7f7f7',
          '100': '#ededed',
          '200': '#dfdfdf',
          '300': '#c8c8c8',
          '400': '#a6a6a6',
          '500': '#999999',
          '600': '#888888',
          '700': '#7b7b7b',
          '800': '#676767',
          '900': '#545454',
          '950': '#363636',
      },
        black: "oklch(15.61% 0.035 22)" ,
        white: "oklch(100% 0 0)" ,
      }
}
 tailwind.config.ts

import type { Config } from 'tailwindcss'
const designSystem = require('./tailwind.ds.js');

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    extend: {
      colors:{
        primary: {
          DEFAULT: "#fb991c" ,
          '50': '#fff8eb',
          '100': '#feeac7',
          '200': '#fdd48a',
          '300': '#fcb74d',
          '400': '#fb991c',
          '500': '#f5780b',
          '600': '#d95506',
          '700': '#b43809',
          '800': '#922b0e',
          '900': '#78240f',
          '950': '#450f03',
        },
        secondary: {
          DEFAULT: "#50a787" ,
          '50': '#f0f9f5',
          '100': '#daf1e5',
          '200': '#b8e2cf',
          '300': '#89ccb1',
          '400': '#50a787',
          '500': '#369374',
          '600': '#26755d',
          '700': '#1e5e4c',
          '800': '#1a4b3d',
          '900': '#163e33',
          '950': '#0c221d',
        },
        gray: {
          '50': '#f7f7f7',
          '100': '#ededed',
          '200': '#dfdfdf',
          '300': '#c8c8c8',
          '400': '#a6a6a6',
          '500': '#999999',
          '600': '#888888',
          '700': '#7b7b7b',
          '800': '#676767',
          '900': '#545454',
          '950': '#363636',
      },
        black: "oklch(15.61% 0.035 22)" ,
        white: "oklch(100% 0 0)" ,
      }
}
app.config.ts

export default defineAppConfig({
    ui: {
      primary: 'primary',
      gray: 'gray',
    },
  })
app.config.ts

export default defineAppConfig({
    ui: {
      primary: 'primary',
      gray: 'gray',
    },
  })
and the css variable text-primary is not generated
No description
6 Replies
kapa.ai
kapa.ai•3w ago
Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that you're encountering an issue with custom color configuration in Nuxt UI. Let me help you with that. The problem you're experiencing is likely related to how you've defined your custom colors and how Nuxt UI processes them. Here are a few points to consider: 1. Color Definition: You've correctly defined your custom colors in the tailwind.config.ts file. However, Nuxt UI requires all shades from 50 to 950 to be defined for the primary and gray colors. 2. App Config: Your app.config.ts file is correctly set up to use the custom 'primary' and 'gray' colors. 3. CSS Variables: Nuxt UI uses CSS variables to provide dynamic colors that can be changed at runtime. These variables are automatically generated based on your configuration. To resolve this issue, try the following: 1. Ensure all required shades are defined: Make sure you have all shades from 50 to 950 defined for both 'primary' and 'gray' colors in your tailwind.config.ts. It seems you already have this covered. 2. Safelist the custom colors: Add your custom colors to the safelistColors option in your nuxt.config.ts file. This ensures that Tailwind generates the necessary CSS for your custom colors. 
   // nuxt.config.ts
   export default defineNuxtConfig({
     ui: {
       safelistColors: ['primary', 'gray']
     }
   })
   
   // nuxt.config.ts
   export default defineNuxtConfig({
     ui: {
       safelistColors: ['primary', 'gray']
     }
   })
3. Rebuild your application: After making these changes, try rebuilding your application to ensure all configurations are properly applied. If you're still encountering issues after trying these steps, it's possible that there might be a conflict with how the colors are being processed or applied. In that case, you might want to check the Nuxt UI documentation for any updates or known issues related to custom color configurations. For more detailed information on theming and color configuration in Nuxt UI, you can refer to the Nuxt UI Theming documentation. If the problem persists, consider creating a minimal reproduction of the issue and sharing it on the Nuxt UI GitHub repository for further assistance from the maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Omnislash
Omnislash•3w ago
Hello, You can't call your primary primary, it conflicts with nuxt ui primary.
Omnislash
Omnislash•3w ago
Likewise, you can't define a primary color in your tailwind.config.ts as it would conflict with the primary color defined by the module.
Likewise, you can't define a primary color in your tailwind.config.ts as it would conflict with the primary color defined by the module.
https://ui.nuxt.com/getting-started/theming
Nuxt UI
Theming - Nuxt UI
Learn how to customize the look and feel of the components.
Hugo
HugoOP•3w ago
Okay, thank you, i didn't saw this line. By the way, do you ave any idea, why tailwind don't create css variables when i define it as variable ? I would like to uses my colors as css variable but tailwind (via Nuxt/Ui i guess) transform my variable directly to rgba color
Omnislash
Omnislash•3w ago
No idea sorry :/, I just use @apply from time to time and it works well Since your exemple is with primary maybe it's the same reason ? did you try with others ?

Did you find this page helpful?