循环生成列表项时，如何用Tailwind实现CSS相邻兄弟选择器效果？

你可以用以下两种Tailwind写法实现和li + li { margin-top: 20px; }完全一致的效果，且不需要依赖peer类，适配循环生成单个<li>的场景：

方法一：利用:not(:first-child)伪类 #

给每个循环生成的<li>添加类[&:not(:first-child)]:mt-5（20px对应Tailwind的mt-5，如果需要精确像素值也可以用mt-[20px]）。该写法会给除第一个<li>外的所有列表项添加上顶部外边距，效果和目标CSS规则一致。

示例代码：

<li class="[&:not(:first-child)]:mt-5">列表项内容</li>

方法二：使用相邻兄弟选择器自定义语法 #

给每个<li>添加类[&+&]:mt-5，其中&代表当前元素，&+&等价于CSS中的li + li，即“当前元素的前一个兄弟元素也是<li>时，给当前元素添加顶部外边距”。

示例代码：

<li class="[&+&]:mt-5">列表项内容</li>

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