Nuxt•2y ago

NuxtUI Coloring with TailwindCSS Color Object

Hi :)

Here's what I'm trying to achieve
I am trying to customize the elements in the Pagination NuxtUI component by coloring it with my custom Tailwind CSS class. (See image reference)

I'm stuck on trying to use the different shades of my defined Tailwind CSS color.

tailwind.config.ts

tailwind.config.ts

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        customtestcolor: {
          50: '#fffce5',
          100: '#fffbc7',
          200: '#fff995',
          300: '#fef958',
          400: '#f5f126',
          500: '#dcdc06',
          600: '#b5b800',
          700: '#808506',
          800: '#65690b',
          900: '#53580f',
        },
      },
    },
  },
};

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        customtestcolor: {
          50: '#fffce5',
          100: '#fffbc7',
          200: '#fff995',
          300: '#fef958',
          400: '#f5f126',
          500: '#dcdc06',
          600: '#b5b800',
          700: '#808506',
          800: '#65690b',
          900: '#53580f',
        },
      },
    },
  },
};

Here's how I tried

* Defined the color in

tailwind.config.ts

tailwind.config.ts

(see code above)
* Defined the

config

config

property of the NuxtUI element I'm trying to modify in the

app.config.ts

app.config.ts

file:

export default defineAppConfig({
  ui: {
    strategy: 'override',
    pagination: {
      default: {
        activeButton: {
          color: 'customtestcolor',
        },
      },
    },
  },
});

export default defineAppConfig({
  ui: {
    strategy: 'override',
    pagination: {
      default: {
        activeButton: {
          color: 'customtestcolor',
        },
      },
    },
  },
});

* With this snippet, I could get it to use some value from the defined shades, but I can't define which one it should use.

Clues (Ignore if too confusing)

* I can see TailwindCSS successfully generating the classes,
from the

/_tailwind

/_tailwind

route. (See image references)

However, using these classes do not have effect when passed to the color prop.

* The color property takes predefined values as an argument, that are defined here

.nuxt/ui.colors.d.ts

.nuxt/ui.colors.d.ts

. My custom color is declared there, however, without any of the shades I defined. (See File in Demo Project below)

Thanks in advance!

Demo:
https://stackblitz.com/edit/nuxt-ui-biu6pb?file=app.vue,app.config.ts,tailwind.config.ts,.nuxt%2Fui.colors.d.ts

Tailwind Object Syntax:
https://tailwindcss.com/docs/customizing-colors#color-object-syntax

Pagination Docs:
https://ui.nuxt.com/components/pagination

NuxtUI Coloring with TailwindCSS Color Object

tailwind.config.ts

tailwind.config.ts

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        customtestcolor: {
          50: '#fffce5',
          100: '#fffbc7',
          200: '#fff995',
          300: '#fef958',
          400: '#f5f126',
          500: '#dcdc06',
          600: '#b5b800',
          700: '#808506',
          800: '#65690b',
          900: '#53580f',
        },
      },
    },
  },
};

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        customtestcolor: {
          50: '#fffce5',
          100: '#fffbc7',
          200: '#fff995',
          300: '#fef958',
          400: '#f5f126',
          500: '#dcdc06',
          600: '#b5b800',
          700: '#808506',
          800: '#65690b',
          900: '#53580f',
        },
      },
    },
  },
};

Here's how I tried

* Defined the color in

tailwind.config.ts

tailwind.config.ts

(see code above)
* Defined the

config

config

property of the NuxtUI element I'm trying to modify in the

app.config.ts

app.config.ts

file:

export default defineAppConfig({
  ui: {
    strategy: 'override',
    pagination: {
      default: {
        activeButton: {
          color: 'customtestcolor',
        },
      },
    },
  },
});

export default defineAppConfig({
  ui: {
    strategy: 'override',
    pagination: {
      default: {
        activeButton: {
          color: 'customtestcolor',
        },
      },
    },
  },
});

/_tailwind

/_tailwind

.nuxt/ui.colors.d.ts

.nuxt/ui.colors.d.ts

NuxtUI Coloring with TailwindCSS Color Object

NuxtUI Coloring with TailwindCSS Color Object

Similar Threads

Similar Threads

Similar Threads