Equal-width columns in CSS with flexbox and Tailwind

Question

I want to have a flexbox layout where three columns have the same width.

I have to use Tailwind in this case, but it doesn't change the CSS theory... which, as far as I know, says I need to give the three columns the same basis, and then let them grow freely (all of them will grow the same proportion because they have the same basis).

But it's not working. One of the column gets bigger and I don't know why.

Note: I added a border just to make it visually clear, but I don't need that.

.just-a-border {
border: 2px dotted purple;
}

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>

Any idea to make it work?

Answer 1

You used the classes from Tailwind CSS v3. So, if you upgrade your Tailwind CSS version to v3, your codes will be just working good.

If you want to keep the current version which is v2, you just need to update a few of class names in your current codes like below. basis-1 to flex-1, grow to flex-grow

.just-a-border {
  border: 2px dotted purple;
}

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row flex-nowrap items-center gap-5 justify-center py-12">
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>