Is it possible to control duration / speed of Daisyui drawer?

Question

I'm trying to increase the speed of daisyui drawer opening and closing.

<div class="drawer" class:drawer-close={closeMenu}>
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
    <slot />
</div>
<div class="drawer-side z-30 transition duration-75">
    <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay" />
    <ul class="menu p-4 pt-22 w-full md:w-80 min-[1980px]:w-128 min-[1980px]:pl-24  min-h-full bg-base-200 text-base-content">

I tried to put "transition duration-75" tailwindcss class on each div of the drawer but without any effects. Is there a way to achieve that ?

Answer 1

The duration on the drawer and overlay are set via the

.drawer-side > .drawer-overlay {
  transition-duration: 200ms;
}
.drawer-side > *:not(.drawer-overlay) {
  transition-duration: 300ms;
}

selectors which are more specific and will override any additional duration-x class.

Since a utility class is added inside a Svelte component, the same selectors set inside the component's <style> tag will override the default ones

Svelte component

<style>
.drawer-side > .drawer-overlay {
  transition-duration: 50ms;
}
.drawer-side > *:not(.drawer-overlay) {
  transition-duration: 75ms;
}
</style>

->

.drawer-side.s-y_bCXRrkrYfP > .drawer-overlay.s-y_bCXRrkrYfP {
  ...
}
.drawer-side.s-y_bCXRrkrYfP > .s-y_bCXRrkrYfP:not(.drawer-overlay) {
  ...
}