Overwrite css classes of slots

[schillerenrico]

Description

Hello, I just wanted to overwrite shadow-sm with another shadow in the card root slot.
But I failed to do so. I tried the :ui way and the app.config.ts way but in both cases the new class "shadow-card" ended up BEHIND "shadow-sm".

    card: {
      slots: {
        root: "shadow-card",
      },
    },

So shadow-card always gets overwritten by shadow-sm cause the code always ends up like this:

<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm shadow-card">

so how can I overwrite shadow-sm here?

[benjamincanac]

Does this work with shadow-xl?

[schillerenrico]

@benjamincanac yeah xl is overwriting the sm shadow

looks like shadows I defined in my @theme wont overwrite existing shadow classes

@theme {
--shadow-card: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

[benjamincanac]

Yes this is because we need to customize the tailwind-merge behavior when using custom theme which is used by Tailwind Variants.

I just made #2938 to support this, would you mind trying it out by installing https://pkg.pr.new/@nuxt/ui@2938?

It will allow you to add this to your app.config.ts to handle your custom shadow class:

export default defineAppConfig({
  ui: {
    tv: {
      twMergeConfig: {
        classGroups: {
          shadow: [{ shadow: ['card'] }]
        }
      }
    },
    colors: {
      primary: 'green',
      neutral: 'slate'
    }
  }
})

For reference here are the docs about this:

• https://www.tailwind-variants.org/docs/config#global-config
• https://github.com/dcastil/tailwind-merge/blob/v2.2.2/docs/configuration.md

[schillerenrico]

Thanks for the detailed explanation. I tested it and it works perfect. Hope this will make it to alpha.11.
The pkg pull removed a few packages "added 10 packages, removed 26 packages, changed 9 packages"

Im a bit careful for now and will continue to use alpha.10

Great work!