我正在使用Tailwind CSS与next.js我有8个不同大小的图像，并希望保持4个图像在一行中的中型和大型设备和2个图像在一行中的小型设备。
我希望在一行中的项目之间给予相等的空间，但我希望一行中的第一个项目应该在最左边的位置，一行中的最后一个项目应该在最右边的位置。其余项目之间应该保持相等的距离
如何使用Tailwind CSS实现这一点？通常在某些条件下，我知道如何做到这一点。但我只是想知道有没有办法直接使用Tailwind CSS实现这一点？
来自api的Json响应

const ourPartners = [
    {
        id: "partner01",
        pic: partner_01
    },
    {
        id: "partner02",
        pic: partner_02,
    },
    {
        id: "partner03",
        pic: partner_03,
    },
    {
        id: "partner04",
        pic: partner_04,
    },
    {
        id: "partner05",
        pic: partner_05,
    },
    {
        id: "partner06",
        pic: partner_06,
    },
    {
        id: "partner07",
        pic: partner_07,
    },
    {
        id: "partner08",
        pic: partner_08,
    }
]

下面是我如何尝试做它的代码

<div className="flex flex-row flex-wrap justify-between items-center">
      {
          ourPartners.map((item, index) => {
              return (
                  <div className={`md:w-1/4 w-1/2 mb-10 ${(index % 4 !== 0 ? ('flex justify-center') : ('flex justify-start'))}`} key={item.id}>
                      <div className="w-32 object-contain">
                          <Image
                              alt="partner"
                              width="auto"
                              height="auto"
                              src={item.pic}
                              quality={100}
                          />
                      </div>
                  </div>
              )
          })
      }
 </div>