Tailwind CSS - 项目之间的垂直间距

Question

我一直在尝试使用 Tailwind CSS 的 content- Between 来分配容器中的行，以便每行之间有相等的空间。请帮忙。

<div className="w-96 mx-10">
  <div className="flex flex-col content-between">
    <div className="bg-red-400">
      <h2 className="text-3xl">Technology Used</h2>
    </div>
    <div className="text-lg bg-blue-200">
      <ul>
        <li>ITEM1</li>
        <li>ITEM2</li>
        <li>ITEM3</li>
        <li>ITEM4</li>
      </ul>
    </div>
    <div className="bg-green-100">{project.description}</div>
  </div>
</div>

Answer 1

您能检查一下下面的代码吗？希望它对你有用。您需要space-y-2在父元素中添加类，如下代码所示。

参考链接： https: //tailwindcss.com/docs/space

<div className="flex flex-col content-between space-y-2">
  <div className="bg-red-400">
    <h2 className="text-3xl">Technology Used</h2>
  </div>
  <div className="text-lg bg-blue-200">
    <ul>
      <li>ITEM1</li>
      <li>ITEM2</li>
      <li>ITEM3</li>
      <li>ITEM4</li>
    </ul>
  </div>
  <div className="bg-green-100">{project.description}</div>
</div>