@nocksock/tw-stacks

Tailwind Layout Stacks

Three small utility classes to make writing flex-layouts just a little bit easier.

• hstack-8 -> flex gap-8 items-center
• vstack-8 -> flex gap-8 flex-col
• cstack-8 -> flex gap-8 items-center justify-center

Example:

tailwind play

<nav class="m-4">
  <menu class="hstack-8">
    <li>
      <a href="#" class="hstack-2">
        <svg ...>...</svg>
        Home
      </a>
    </li>
    <li>
      <a href="#" class="hstack-2">
        <svg ...>...</svg>
        Resources
      </a>
    </li>
    <li>
      <a href="..." class="hstack-2">
        <svg ...>...</svg>
        Download
      </a>
    </li>
  </menu>
  <nav></nav>
</nav>