Flex

Introduces a few TailwindCSS shorthand utility classes for flex.

View Source 

  .flex-col {
    display: flex;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
  }

  .flex-center {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

Example

Without shorthand classes

<div class="flex flex-col"></div>
<div class="flex justify-between gap-sm"></div>
<div class="flex items-center gap-sm"></div>

With shorthand classes

<div class="flex-col"></div>
<div class="flex-between"></div>
<div class="flex-center"></div>