Idea for more space utilities

[lubomirblazekcz]

@adamwathan perhaps this could be nice addition for space utilities maybe? Especially space-gap is handy with divide border utilities

https://play.tailwindcss.com/EPD43d5drw

@utility space-px-* {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;

    padding-inline: calc(--value([length], [ *]) * var(--tw-space-x-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-x-reverse)));
    padding-inline: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-x-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-x-reverse)));
  }
}

@utility space-py-* {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;

    padding-block: calc(--value([length], [ *]) * var(--tw-space-y-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-y-reverse)));
    padding-block: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-y-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-y-reverse)));
  }
}

@utility space-gap-y-* {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;

    margin-block: calc(--value([length], [ *]) * var(--tw-space-y-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-y-reverse)));
    margin-block: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-y-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-y-reverse)));
    padding-block: calc(--value([length], [ *]) * var(--tw-space-y-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-y-reverse)));
    padding-block: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-y-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-y-reverse)));
  }
}

@utility space-gap-x-* {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;

    margin-inline: calc(--value([length], [ *]) * var(--tw-space-x-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-x-reverse)));
    margin-inline: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-x-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-x-reverse)));
    padding-inline: calc(--value([length], [ *]) * var(--tw-space-x-reverse))
      calc(--value([length], [ *]) * calc(1 - var(--tw-space-x-reverse)));
    padding-inline: calc(calc(var(--spacing) * --value(integer)) * var(--tw-space-x-reverse))
      calc(calc(var(--spacing) * --value(integer)) * calc(1 - var(--tw-space-x-reverse)));
  }
}