The right way of having a list wrapping with proper spacing

[frandiox]

Hi! When using space-x-1 in a list of items that can wrap (using flexbox), the first item is a bit off due to the lack of margin:

A workaround for this would be adding ml-1 to the first item and then a negative margin -mx-1 to the parent. I was just wondering if there is a simpler way of doing this 🤔

See an code example here: https://play.tailwindcss.com/YJSXzHUpOG

[chr-ge]

Would you be able to share a tailwindcss play link?

[frandiox]

I've added a link in the original post 👍

[chr-ge]

One option would be to remove space-x-5 and add a mr-5 to each tag. Or, you can use Grid:

<div class="gap-x-5 grid grid-cols-2 w-28">
   <div>tag1</div>
   ...
 </div>

[MathGeniusJodie]

https://tailwindcss.com/docs/gap
except it's not supported in safari yet, so would recommend using margin on the children with a negative margin on the parent

[frandiox]

Thanks, I think I was looking for something like this. Unfortunate that Safari is not supporting it yet 😅

[MathGeniusJodie]

it's in the beta, next major version ^^

[simonswiss]

Hey! 👋

I am touching on this exact point in this video, at the ~3:30 mark:

https://youtu.be/wTRTC4JNSGs?t=213

As @MathGeniusJodie mentioned above, this will be solved with the implementation of the gap property in Flexbox.

Until then, we're forced to do the negative spacing trick on the parent wrapper as a workaround solution.

It's coming though!

One day.

[frandiox]

Thank you! Didn't know you guys had videos on YouTube as well 😃