如何控制DaisyUI抽屉的开关速度？添加Tailwind类无效怎么办？

直接给drawer-side添加Tailwind的transition duration-75类无效，因为DaisyUI抽屉组件的过渡动画是通过内置CSS变量控制的，自定义类会被默认样式覆盖。以下是可行的解决方式：

1. 修改内置CSS变量 #

DaisyUI抽屉的动画时长由--drawer-duration变量定义，在全局样式或组件的<style>标签中添加如下代码，直接覆盖这个变量即可：

.drawer {
  --drawer-duration: 75ms; /* 对应Tailwind的duration-75时长 */
}

无需额外给元素加transition类，修改后抽屉的开关动画速度会直接生效。

2. 修正组件class写法 #

你提供的代码中，drawer元素存在两个class属性，可能导致样式解析异常，建议合并为一个（以Svelte框架为例）：

<div class="drawer" class:drawer-close={closeMenu}>
<!-- 或统一写成 -->
<div class={`drawer ${closeMenu ? 'drawer-close' : ''}`}>

确保组件结构正确，避免样式失效的潜在问题。

注意事项 #

• 抽屉的过渡动画作用在整个.drawer容器上，而非单独的.drawer-side元素，针对后者加transition类不会起作用。
• 如果自定义CSS优先级不足，可确保自定义样式在DaisyUI样式之后加载，或临时添加!important（不推荐长期使用）强制覆盖。

内容的提问来源于stack exchange，提问作者mulholland