Tailwind CSS的space类样式未作用于列表首个项如何解决？

Tailwind的space-*类设计逻辑是给除第一个子元素外的所有子元素添加margin来实现项间间距，所以首个列表项不会产生间距，这是正常表现。要让首个项也有对应间距，可根据需求选择以下方案：

方案1：给容器加padding补首尾间距（推荐） #

给<ul>添加与space-*数值匹配的padding，容器首尾的padding会补上首个项、最后一项与容器边缘的间距，同时保留space-x-6和space-y-6负责项之间的间距：

<ul class="flex space-y-6 space-x-6 px-6 py-6">
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Cersei</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Arya Stark</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Danerays</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Sansa Stark</a>
    </li>
</ul>

方案2：给首个项单独加margin（需抵消容器偏移） #

如果要让首个项和其他项一样有外边距，可给第一个<li>添加对应margin，同时给<ul>加负margin抵消整体布局偏移：

<ul class="flex space-y-6 space-x-6 -mt-6 -ml-6">
    <li class="mt-6 ml-6">
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Cersei</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Arya Stark</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Danerays</a>
    </li>
    <li>
        <a href="#"><img src="assets/image.jpg" alt="Profile Photo"></a>
        <a href="#">Sansa Stark</a>
    </li>
</ul>

注意：space-y-6在flex垂直方向（flex-col）生效，space-x-6在水平方向（默认flex-row）生效，同时添加两个类时需确保布局方向符合预期，避免样式冲突。

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