JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

CSS

:root {
  --gutter-width: 16px;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
}

.container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.direction-row {
  flex-direction: row;
}
.direction-row-reverse {
  flex-direction: row-reverse;
}
.direction-row,
.direction-row-reverse {
  margin-right: var(--gutter-compensation);
  margin-left: var(--gutter-compensation);
}
.direction-column {
  flex-direction: column;
}
.direction-column-reverse {
  flex-direction: column-reverse;
}
.direction-column,
.direction-column-reverse {
  margin-top: var(--gutter-compensation);
  margin-bottom: var(--gutter-compensation);
}

.justify-content-flex-start {
  justify-content: flex-start;
}
.justify-content-flex-end {
  justify-content: flex-end;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-space-between {
  justify-content: space-between;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-space-evenly {
  justify-content: space-evenly;
}

.align-items-flex-start {
  align-items: flex-start;
}
.align-items-flex-end {
  align-items: flex-end;
}
.align-items-center {
  align-items: center;
}
.align-items-stretch {
  align-items: stretch;
}
.align-items-baseline {
  align-items: baseline;
}

.item {
  box-sizing: border-box;
  flex: 0 1 auto;
  /*
   * A min-width is necessary to enable text truncation on the children.
   * See https://css-tricks.com/flexbox-truncated-text/.
   */
  min-width: 0;
  max-width: 100%;
}
.direction-row > .item,
.direction-row-reverse > .item {
  margin-left: var(--half-gutter-width);
  margin-right: var(--half-gutter-width);
}
.direction-column > .item,
.direction-column-reverse > .item {
  margin-top: var(--half-gutter-width);
  margin-bottom: var(--half-gutter-width);
}

.size-auto {
  flex-basis: 'auto';
}
.direction-row > .size-1,
.direction-row-reverse > .size-1 {
 ...