Nuxt•4mo 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

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 (see code above) * Defined the config property of the NuxtUI element I'm trying to modify in the 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 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. 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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

NuxtUI Coloring with TailwindCSS Color Object