bug: Diff component not working inside Card

[t-lecoublet]

Reproduction URL (Required)

https://play.tailwindcss.com/mWr6VLF5Fq

What version of daisyUI are you using?

5.5.17

Which browsers are you seeing the problem on?

Firefox, Chrome, Other

Describe your issue

Description:
The diff component does not render correctly when placed inside a card component. The issue appears to be caused by a conflict between the layer utilities, where the card layer overrides the properties of the diff layer.

Expected behavior:
The diff component should render correctly inside a card, just as it does outside of it.

Actual behavior:
The diff component is broken when inside a card (the slider and comparison functionality doesn't work).

Possible solution:
This might be resolved by adjusting the layer utility priorities or ensuring the diff component's styles take precedence when needed.

[github-actions]

Thank you @t-lecoublet for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

@saadeghi
It looks like in card we apply styles to all figure inside, but all examples are with the images as direct child of card (and it woul make sense).

So I would say we should scope the style applied in card only to direct children of card.

https://play.tailwindcss.com/nZVaZs1bUq?file=css (has the example above and also all cards with image from docs)

What I am unsure about is the below, where my logic would say that p should also be only direct child of card-body (> :where(p)), but I am afraid that there are people that rely on the current behavior.

card-body {
  @layer daisyui.l1.l2.l3 {
    @apply flex flex-auto flex-col gap-2;
    padding: var(--card-p, 1.5rem);
    font-size: var(--card-fs, 0.875rem);

    :where(p) {
      @apply grow;
    }
  }
}

I'll open a PR and discuss this there.

[saadeghi]

I see.
People may nest things inside divs or other elements. Sometimes it's out of control even (for example an embedded video may append elements in the card) so we can't strictly say that something must be a direct child or not.