TailwindCSS中<li>元素space-y-2间距异常问题求助
问题原因及解决办法
问题根源:你把
space-y-2类错误地加在了每个<li>元素上。Tailwind的space-y-*类是给父容器使用的工具类,它的逻辑是给容器内的子元素(除第一个外)添加margin-top来实现垂直间距。给单个<li>加这个类完全不符合它的设计逻辑,自然会导致第一个<li>没有预期的间距效果。解决办法:
- 移除所有
<li>元素上的space-y-2类 - 给
<li>的父容器<ul>添加space-y-2类
- 移除所有
这样父容器会自动为除第一个<li>外的所有子元素添加上方间距,既实现了垂直布局的间距需求,也不会出现第一个元素的异常问题。
内容的提问来源于stack exchange,提问作者Rishi
相关产品推荐
相关产品推荐

