DaisyUI与TailwindCSS中collapse组件min-h-0不生效问题求助

首先，这个现象的核心原因是CSS样式优先级冲突，并非库的bug，也不是你对样式覆盖的理解有误，只是没考虑到不同选择器的权重差异：

• daisyUI为collapse组件内的checkbox元素设置了优先级更高的min-height样式，比如它的CSS规则可能是类似.collapse .collapse-title input[type="checkbox"]这种多重类+属性选择器组合，权重远高于Tailwind的单一.min-h-0类选择器。
• Tailwind的min-h-0类优先级不够，所以无法覆盖daisyUI的默认样式；而行内样式的优先级是所有CSS规则里最高的，所以能直接生效。

可行的解决办法 #

不用依赖行内样式，你可以用这两种方式解决：

1. 使用Tailwind的重要性前缀：给checkbox元素加上!min-h-0类，强制提升样式优先级，示例代码：

   <div class="collapse">
     <input type="checkbox" class="!min-h-0" />
     <div class="collapse-title text-xs">标题文本</div>
     <div class="collapse-content">折叠内容</div>
   </div>
   

2. 自定义CSS覆盖：在你的样式文件中添加更高权重的规则：

   .collapse .collapse-title input[type="checkbox"] {
     min-height: 0;
   }
   

补充说明 #

daisyUI给checkbox设置默认min-height是为了保证组件的点击交互区域大小，适配默认字体尺寸。当你使用text-xs缩小字体后，默认的min-height就会显得冗余，这属于组件默认样式和自定义需求的适配场景，并非库的bug，只需要通过更高优先级的样式规则覆盖即可。

内容的提问来源于stack exchange，提问作者Tomo Česnik