Foundation to Tailwind CSS: grid-padding-x and grid-margin-x?

Question

How do we do gutters in Tailwind CSS?

My attempt with gap-4 below:

<div class="flex flex-col justify-center items-center h-64 bg-green-100 gap-4">

    <div class="flex flex-wrap justify-center items-center gap-4 w-full">
      <div class="bg-green-500 w-1/2 text-center">1</div>
      <div class="bg-green-500 w-1/2 text-center">1</div>
      <div class="bg-green-500 w-1/2 text-center">1</div>
      <div class="bg-green-500 w-1/2 text-center">1</div>
      <div class="bg-green-500 w-1/2 text-center">1</div>
    </div>

  </div>

But the result is not what I am trying to achieve as the gutters in Foundation:

<div class="grid-x grid-margin-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>
</div>

Is it gaps that I should look for in TW? Or something else?

Answer 1

Use space-x-<n> and/or space-y-<n> (Space Between) for flexbox.

Use gap-<n> (Gap) for grids.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex flex-row space-x-4 bg-red-200">
  <div class="bg-red-400 p-4 flex-grow">Flex</div>
  <div class="bg-red-400 p-4 flex-grow">Flex</div>
  <div class="bg-red-400 p-4 flex-grow">Flex</div>
  <div class="bg-red-400 p-4 flex-grow">Flex</div>
</div>

<br>

<div class="grid grid-flow-row grid-cols-4 gap-4 bg-blue-200">
  <div class="bg-blue-400 p-4">Grid</div>
  <div class="bg-blue-400 p-4">Grid</div>
  <div class="bg-blue-400 p-4">Grid</div>
  <div class="bg-blue-400 p-4">Grid</div>
</div>