Tailwind CSS 的基础：grid-padding-x 和 grid-margin-x？

问题描述

我们如何在 Tailwind CSS 中制作装订线？

我尝试使用以下 gap-4：

const pathname = Object.assign( {},useLocation() ).pathname;

但是 result 并不是我作为 Foundation 中的 gutters 想要实现的：

<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>

我应该在台湾寻找gaps吗？还是别的什么？

解决方法

对 flexbox 使用 space-x-<n> 和/或 space-y-<n> (Space Between)。

对网格使用 gap-<n> (Gap)。

<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>