Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Overwrite css classes of slots #2936

Open
schillerenrico opened this issue Dec 19, 2024 · 3 comments · May be fixed by #2938
Open

Overwrite css classes of slots #2936

schillerenrico opened this issue Dec 19, 2024 · 3 comments · May be fixed by #2938
Labels
question Further information is requested v3 #1289

Comments

@schillerenrico
Copy link

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?
@schillerenrico schillerenrico added question Further information is requested v3 #1289 labels Dec 19, 2024
@schillerenrico schillerenrico changed the title Overwrite classes of slots Overwrite css classes of slots Dec 19, 2024
@benjamincanac
Copy link
Member

Does this work with shadow-xl?

@schillerenrico
Copy link
Author

schillerenrico commented Dec 19, 2024 •
edited
Loading

@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 benjamincanac linked a pull request Dec 19, 2024 that will close this issue
Draft
8 tasks
@benjamincanac Volta.net
Copy link
Member

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested v3 #1289
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(module): allow tv customization through app.config nuxt/ui
2 participants
@benjamincanac @schillerenrico