How to give equal space between the items using tailwind css v3 - css

Question

I am using Tailwind CSS with next.js.
I have 8 images of different sizes and want to keep 4 images in a row for mid and large-size devices and 2 images in a row for small-size devices.
I want to give equal space between the items in a row but I want the first item in a row to be at the leftmost place and the last item in a row to be at the rightmost place.
The rest of the items should maintain equal distance between them.
How can I achieve this using Tailwind CSS? Normally with some conditions, I know how to do it, but is there any way to do it directly with Tailwind?
JSON response from API:
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,
}
]
The code where I'm mapping over the array:
<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>

Answer 1

EDITED:
I actually learned something new here too. You can use nth-child now with Tailwind.
const Partners = () => {
return (
<div className="grid md:grid-cols-4 grid-cols-2 gap-y-10 justify-between">
{ourPartners.map((item, index) => {
return (
<div
key={item.id}
className="odd:justify-self-start even:justify-self-end md:[&:nth-child(4n+2)]:justify-self-center md:[&:nth-child(4n+3)]:justify-self-center"
>
<div className="w-32">
<img alt="partner" width="auto" height="auto" src={item.pic} />
</div>
</div>
);
})}
</div>
);
};
export default Partners;