Custom Styles configuration does not work.

[sadlrxn]

Environment

• package-manager: bun
• vue 3.5.22
• tailwindcss 4.1.16

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.1.0

Reproduction

app.config.ts

import type { NuxtUIOptions } from "@nuxt/ui/unplugin"
export const uiAppConfig: NuxtUIOptions = {
  colorMode: false,
  ui: {
    colors: {
      primary: 'primary',
      secondary: 'secondary',
      success: 'success',
      info: 'info',
      warning: 'warning',
      error: 'error'
    },
    icons: {
      loading: 'i-lucide-loader',
      chevronDown: 'i-lucide-chevron-down',
      chevronRight: 'i-lucide-chevron-right',
      external: 'i-lucide-arrow-up-right'
    },
    pageCard: {
      slots: {
        root: 'bg-red-500'
      }
    }
  }
}

Description

in app.config.ts,

pageCard: {
      slots: {
        root: '!bg-red-500'
      }
    } 

customization does not work. meaning default tailwind classes are overriding custom ones which should be other way round.
for example to change the colour of pageCard, i had to force the colour with !bg-red-500. i tired for both vuejs and nuxt, same thing.

Additional context

Logs

-

[benjamincanac]

The background of the PageCard is applied by the variant variant: https://github.com/nuxt/ui/blob/v4/src/theme/page-card.ts#L33

You need to override each variant background or use important like you did to override them all.

[sadlrxn]

this one doesn't work too. or i might be doing it wrong.

    pagecard: {
      variant: {
        root: 'bg-card'
      }
    },

i want to customize so every card has same look. i am not using colour mode. no dark or bright mode. just static colours.

[benjamincanac]

Well you can customize so every card with a specific variant has the same look. Since the PageCard has a default variant set to outline, you customize this one:

export default defineAppConfig({
  ui: {
    pageCard: {
      variants: {
        variant: {
          outline: {
            root: 'bg-card'
          }
        }
      }
    }
  }
})

Check out the theme: https://ui.nuxt.com/docs/components/page-card#theme