JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stack-x" style="display: flex;">
  <div style="background: red">Stack X One</div>
  <div style="background: red">Stack X Two</div>
  <div style="background: red">Stack X Three</div>
</div>

<hr>

<div class="stack-x stack-lg" style="display: flex;">
  <div style="background: red">Stack LG X One</div>
  <div style="background: red">Stack LG X Two</div>
  <div style="background: red">Stack LG X Three</div>
</div>

<hr>

<div class="stack-y">
  <div style="background: red">Stack Y One</div>
  <div style="background: red">Stack Y Two</div>
  <div style="background: red">Stack Y Three</div>
</div>

<hr>

<div class="stack-y stack-lg">
  <div style="background: red">Stack LG Y One</div>
  <div style="background: red">Stack LG Y Two</div>
  <div style="background: red">Stack LG Y Three</div>
</div>

<hr>

<div class="stack-x-reverse" style="display: flex; flex-direction: row-reverse">
  <div style="background: red">Stack X reverse One</div>
  <div style="background: red">Stack X reverse Two</div>
  <div style="background: red">Stack X reverse Three</div>
</div>

<hr>

<div class="stack-x stack-nested" style="display: flex">
  <div style="background: red">Stack nested X One</div>
  <div style="background: red">Stack nested X Two</div>
  <div style="background: blue; display: flex">
    <div style="background: red">Stack nested X One</div>
    <div style="background: red">Stack nested X Two</div>
    <div style="background: red">Stack nested X Three</div>
  </div>
</div>

<hr>

SCSS

// Stack y
.stack-y {
    //display: flex;
    //flex-direction: column;
    //justify-content: flex-start;
    // Reset any margin
    > * { margin-top: 0; margin-bottom: 0; }
    // Add space
    > * + * { margin-top: 1.5rem; }
    // Add large space
    &.stack-lg > * + * { margin-top: 3rem; }
    // Nested
    &.stack-nested {
        * { margin-top: 0; margin-bottom: 0; }
        * + * { margin-top: 1.5rem; }
        &.stack-lg * + * { margin-top: 3rem; }
    }
}

// Stack x
.stack-x {
    //display: flex;
    //flex-direction: row;
    //justify-content: flex-start;
    // Reset any margin
    > * { margin-left: 0; margin-right: 0; }
    // Add space
    > * + * { margin-left: 1.5rem; }
    // Add large space
    &.stack-lg > * + * { margin-left: 3rem; }
    // Nested
    &.stack-nested {
        * { margin-left: 0; margin-right: 0; }
        * + * { margin-left: 1.5rem; }
        &.stack-lg * + * { margin-left: 3rem; }
    }
}

// Stack x reverse
.stack-x-reverse {
    //display: flex;
    //flex-direction: row-reverse;
    //justify-content: flex-start;
    // Reset any margin
    > * { margin-left: 0; margin-right: 0; }
    // Add space
    > * + * { margin-right: 1.5rem; }
    // Add large space
    &.stack-lg > * + * { margin-right: 3rem; }
    // Nested
    &.stack-nested {
        * { margin-left: 0; margin-right: 0; }
        * + * { margin-right: 1.5rem; }
        &.stack-lg * + * { margin-right: 3rem; }
    }
}