CODEWITHSUNDEEP
htmltailwind-css
Data Mastery
Data Mastery

Reputation: 2085

Tailwind space-x-4 -> first item not getting the space applied

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="flex space-x-4 flex-col">
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>
  </body>
</html>

This is my markdown. It should be reproducible. My Problem is that the first item does not get the spacing applied. Every other item does get the space applied. Am I doing something wrong here? I want ALL the items to have space.

enter image description here

Upvotes: 5

Views: 3242

Answers (3)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

While learning tailwind, I came across a similar scenario and after going through the documents, I learned that the space-x is just a property to add spacing between child elements along x-axis (only) and this property should not be confused with the flexbox's gap property. When you check the official document of tailwind, space-x property is just to add the spacing between the child elements along x-axis.

spacing in the tailwind

And as the property suggests space-x, has to do with the spacings only along the x-axis not along the y direction.

    <div className="space-x-4">
      <div className="inline">Item</div>
      <div className="inline">Item</div>
      <div className="inline">Item</div>
      <div className="inline">Item</div>
      <div className="inline">Item</div>
      <div className="inline">Item</div>
      <div className="inline">Item</div>
    </div>

Here I have used an example of it. Each child is inline and the result is as follows:

spacings between elements

So, since you have used flexbox with a flex-direction:column which is <div class="flex space-x-4 flex-col"> in your question. The property to be used should be a gap-4 property.

   <div className="flex flex-col gap-4">
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>

using proper gap property

Upvotes: 1

Kimeshan Naidoo
Kimeshan Naidoo

Reputation: 66

You can also use gap by simply doing gap-4.

As per the docs, space-x has limitations.

These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren’t designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

For those situations, it’s better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.

https://tailwindcss.com/docs/gap

Upvotes: 4

Donald Duck
Donald Duck

Reputation: 638

Try

<div class="ml-4">
   <div>Item</div>
   <div>Item</div>
   ...etc.
</div>

Nice nuance find. space-x-4 is behaving as expected - it's for putting space between items horizontally, so the intended use case is all your divs are on the same line.

enter image description here

space-x-4 is just applying left and right margin to all items after the first

Upvotes: 5

Related Questions