Current styling for space-x-n and space-y-n creates alignment-breaking whitespaces before all elements aside the first when wrapped from page shrink

[ogbotemi-2000]

Screenshots describing this issue

• On mobile The elements wrapped in the shrunken view port, from the second to the last, all have a left margin that breaks their alignment with the first
• On desktop This design inconsistency is not perceptible if the elements are not wrapped due to overflow as displayed in larger view ports

  ---

The source of this behavior

The margin-left property in the style block below is responsible

.space-x-6>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem* var(--tw-space-x-reverse));
    margin-left: calc(1.5rem* calc(1 - var(--tw-space-x-reverse)));
}

A likely solution

As hinted in the screenshots above, removing the margin-left property and making the margin-right property equal twice its original value will result in the stylesheet below

.space-x-6>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(1.5rem * 2) * var(--tw-space-x-reverse)) /*may also be hardcoded as calc(3rem * var(--tw-space-x-reverse))*/;
/*    margin-left: calc(1.5rem* calc(1 - var(--tw-space-x-reverse))); */
}