Has anyone used this with DaisyUI?

[dmccallie]

Thank you for an amazing control. It's wonderful, and your documentation is superb.

I've started trying to customize the control to be compatible with DaisyUI.

I am new to Svelte, to DaisyUI, and to Tailwinds - and to web frameworks in general, and before I spend too much time guessing at configurations, I thought I'd ask to see if anyone has already integrated <MultiSelect> into DaisyUI.

It would great if the integration automatically picked up the DaisyUI theme settings. I have not yet been able to make @apply work with :globalstyles.

Thanks again for a great tool.

[janosh]

Not a Tailwind or DaisyUI user myself but there've been a few issues about Tailwind. If you ping some of the people who opened those, they might be able to help.

[dmccallie]

Thanks for the quick reply.

I have just figured out how to use the :global overrides that you provided in your documentation. For example, this works nicely:

:global(div.multiselect > ul.options) {
  /* dropdown options */
    color: #ffffff;
    background-color: slategray;
}

But I am hoping to be able to use @apply to set these global override styles using pre-defined tailwindcss and daisy "mix in" classes so that I don't have to re-edit the styles if the theme is changed.

I found some info on how to get @apply to work inside the Svelte <style> blocks, but haven't had a chance to give it a try:

https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md

[janosh]

Thanks for documenting your findings here! 🙏 I'm sure it'll come up again. Will be great to have some advice to point people at.

[dmccallie]

One more temporizing hack - apparently Daisy and/or Tailwinds define many CSS variables that change with the selected theme. I have not yet tried to get @apply to work inside a component's <style> block, but I was able to get substantial benefit by referencing those CSS variables using the :global trick that you documented. I used the chrome debugger to find out which values were being used.

This is certainly not a total solution, but it allows me to move on to other issues....

:global(div.multiselect) {
  /* top-level wrapper div at baseline*/
  border-width:  var(--border-btn, 1px);
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: currentColor;
 }

:global(div.multiselect > ul.options) {
  /* dropdown options - found these using the debugger!*/
    color: hsla(var(--bc) / var(--tw-text-opacity, 1));
    background-color:  hsla(var(--b1) / var(--tw-bg-opacity, 1));
}