Nuxt•10mo ago

Nuxt UI - Custom tailwind color palettes do not seem to work.

Hi, I just created a new Nuxt project and added Nuxt UI Pro and Nuxt Content. I've added a tailwind.config.ts with the following content:

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        alpha: {
          '50': '#eff9fc',
          '100': '#d6f0f7',
          '200': '#b2e2ef',
          '300': '#7dcbe3',
          '400': '#40acd0',
          '500': '#258fb5',
          '600': '#22769c',
          '700': '#215e7d',
          '800': '#234f67',
          '900': '#214358',
          '950': '#112a3b',
        },
        beta: {
          '50': '#f8faeb',
          '100': '#eff3d4',
          '200': '#dfe8ae',
          '300': '#c8d77f',
          '400': '#b0c556',
          '500': '#8fa637',
          '600': '#728729',
          '700': '#576724',
          '800': '#465321',
          '900': '#3c4720',
          '950': '#1f260d',
        },
      }
    }
  }
}

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        alpha: {
          '50': '#eff9fc',
          '100': '#d6f0f7',
          '200': '#b2e2ef',
          '300': '#7dcbe3',
          '400': '#40acd0',
          '500': '#258fb5',
          '600': '#22769c',
          '700': '#215e7d',
          '800': '#234f67',
          '900': '#214358',
          '950': '#112a3b',
        },
        beta: {
          '50': '#f8faeb',
          '100': '#eff3d4',
          '200': '#dfe8ae',
          '300': '#c8d77f',
          '400': '#b0c556',
          '500': '#8fa637',
          '600': '#728729',
          '700': '#576724',
          '800': '#465321',
          '900': '#3c4720',
          '950': '#1f260d',
        },
      }
    }
  }
}

Unfortunatly neither of these colors are picked up by nuxt/vue. Does anyone have any idea what could be the cause of this?

1 Reply

ISOREXOP•10mo ago

What's strange to me is how when I rename beta to secondary both app.config.ts for the Nuxt UI color and just regular tailwind seems to recognize the color. Restarting Vite seems to have solved this, only not for overwriting the primary color set. I assume because Nuxt is already using this. Is there a solution for this?

Gaming

Programming

Nuxt UI - Custom tailwind color palettes do not seem to work.