How to add gutters to a flex row

I'm new to tailwind and more familiar with frameworks such as Foundation and Bootstrap. My understanding of tailwind is that it is a utility based framework and structured in such a way that the developer shouldn't need to write any custom CSS for the vast majority of situations. I am a full stack developer with nearing 10 years' experience. It shouldn't be this hard for me to transition to a new framework.

My issue is giving the following markup, tailwind just doesn't work. I'm assuming that the issue here is my understanding of tailwind, but that would indicate a significant shortfall in their documentation.

<div class="flex flex-row flex-wrap space-x-4">
    <div class="w-full lg:w-7/12">
    </div>
    <div class="w-full lg:w-5/12">
    </div>
</div>

This results in the right hand column wrapping to a new line. This should not be the default behavoiur, surely??

If I were to use Foundation, the following markup would suffice and more importantly would work:

<div class="grid-x grid-margin-x">
    <div class="large-7 cell">
    </div>
    <div class="large-5 cell">
    </div>
</div>

The resultant layout should be like this for large screens and should stack on mobile.

People of the internet: tell me where I'm going wrong...

Solution

This results in the right hand column wrapping to a new line. This should not be the default behavoiur, surely??

The flex-wrap class applies flex-wrap: wrap which allows elements to flow to a new line when there isn't enough space along the flex axis, in this case, the horizontal axis.

At the lg breakpoint, we have two <div> elements, with width: 58.333333% (from lg:w-7/12) and width: 41.666667% (from lg:w-5/12). We then also have margin-left: 1rem on the second <div> element from the parent space-x-4. This means that the overall horizontal space taken up by both <div> elements in total is 100% + 1rem which is greater than the available horizontal space of 100% and thus the elements wrap.

To have the elements not wrap, you could:

Remove the margin

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="flex flex-row flex-wrap">
    <div class="w-full lg:w-7/12 bg-red-500 h-10">
    </div>
    <div class="w-full lg:w-5/12 bg-blue-500 h-10">
    </div>
</div>

Incorporate the margin into a calculation into the element widths:

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="flex flex-row flex-wrap space-x-4">
    <div class="w-full lg:w-[calc(theme(width.7/12)-(theme(space.4)/2))] bg-red-500 h-10">
    </div>
    <div class="w-full lg:w-[calc(theme(width.5/12)-(theme(space.4)/2))] bg-blue-500 h-10">
    </div>
</div>

Apply flex-grow instead of width to to let the layout engine distribute the width between the items at the desired ratio:

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="flex flex-row flex-wrap gap-x-4">
    <div class="basis-full min-w-0 lg:basis-0 lg:grow-[7] bg-red-500 h-10">
    </div>
    <div class="basis-full min-w-0 lg:basis-0 lg:grow-[5] bg-blue-500 h-10">
    </div>
</div>