Tailwind CSS - Vertically space between items

user_5475733 0
Viewed 2894

I have been trying to use content-between using Tailwind CSS to distribute rows in a container so that there is equal space between each line. Please help.

            <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>
tailwind-css css
1 Answers

Can you please check the below code? Hope it will work for you. You need to add space-y-2 class in the parent element like the below code.

Reference link: 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>
user_122138960
Related