Using space-y-* utilities in reversed flex containers

[fac42]

Code example:
https://codepen.io/fac42/pen/VwmWQvy

There is a design I'm working on that requires that some content be flipped in reverse on mobile screen sizes. As shown in the example code (mobile screen size), the margin between elements doesn't accommodate the new direction of the content inside the flex container in the middle column (Items 1-3).

Any suggestions on how I can fix this?

[simonswiss]

Hey!

When using spacing utilities inside reversed flex containers, you can use the space-{x/y}-reverse utility:

https://tailwindcss.com/docs/space#reversing-children-order

Note - since you want to "un-reverse" them for the lg breakpoint, you'll need to redeclare your spacing for the large breakpoint with lg:space-y-4. This will redefine the --tw-space-y-reverse CSS variable to be 0 instead of 1.

The below set of classes on your <article> tag will do the trick 👍

<article class="space-y-4 flex flex-col-reverse space-y-reverse lg:flex-col lg:space-y-4">