Using DaisyUI causes Misaligned Sonner Layout

[nicolasxbx]

Describe the bug

The toast content is misaligned when using using the popular UI library daisyUI as tailwind plugin.

What I suspect: The shadcn-svelte Sonner component uses the class "toast", which overlaps with the daisyUI class "toast".

This does not happen when removing DaisyUI or using the original Sonner of svelte-sonner:

Reproduction

Using daisyUI with shadcn-svelte basically:

StackBlitz example

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 7.21 GB / 15.93 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.25
    bits-ui: ^0.21.13 => 0.21.13
    cmdk-sv: ^0.0.18 => 0.0.18
    lucide-svelte: ^0.436.0 => 0.436.0
    mode-watcher: ^0.4.1 => 0.4.1
    svelte: ^5.0.0-next.1 => 5.0.0-next.242
    svelte-sonner: ^0.3.27 => 0.3.27
    vaul-svelte: ^0.3.2 => 0.3.2

Severity

annoyance

[nicolasxbx]

Also, temporary fix suggestions are highly appreciated. (And no, not setting a global DaisyUI prefix :), that's cheap. )

[VerburgtJimmy]

Hey I looked at your issue and this library(shadcn/ui svelte ) adds a 'toast' class to the component. This class is also used by daisyui. Therefore daisyui sets the flex-direction of the component to column while shadcn expects it to be in row. I would advise to use the daisyui prefix for classes to avoid these kinds of problems.

Therefore I think the issue can be closed if you are happy with my answer?

[nicolasxbx]

I guess adding a prefix is the only solution here 😐.