Inconsistent spacing with space-y- class

[manueljenni]

Inconsistent spacing with space-y-2 class

I'm having problems with space-y creating uneven spacing around elements.
Specifically, this:

<div className="flex flex-col space-y-2">
   <p>Text</p>
   <div className="my-2">
      <div className="flex flex-col md:flex-row gap-4">
         <Image src={"..."} />
         <Image src={"..."}/>
      </div>
   </div>
   <p>Another text</p>
</div>

creates more spacing around the top of the div containing the images than the bottom, which makes the whole layout seem off.

What version of Tailwind CSS are you using?
v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15.2.1 with PostCSS 8

What version of Node.js are you using?
v21.0.0

What browser are you using?
Chrome

What operating system are you using?
MacOS 15.4.1 (24E263)

Reproduction URL
example see below

Description

The space-y-2 utility class in Tailwind CSS applies spacing only to the top of elements (except the first child), but not to the bottom. This creates inconsistent spacing when elements are followed by different types of content (e.g., paragraphs vs divs).

Example

<div class="space-y-2">
  <p>First paragraph</p>
  <div>Image container</div>
  <p>Second paragraph</p>
</div>

Current Behavior

• The space-y-2 class applies margin-block-start to elements (except first child)
• No equivalent margin-block-end is applied
• This results in more space above elements than below them
• The issue is particularly noticeable when mixing different element types

CSS that causes this (this adds the extra spacing on the top, but not the bottom)

:where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}

I fixed this by adding the following:

.space-y-2 > :not(:last-child) {
  margin-block-end: 0.5rem !important;
}

.space-y-2 > :not(:first-child) {
  margin-block-start: 0.5rem !important;
}

Is this intended? Or a bug?

[wongjn]

The spacing seems to be even in this Tailwind Play which would suggest it would be something particular to your project causing the unexpected behavior. Perhaps you have some extra CSS somewhere that applies margin to certain elements.

[manueljenni]

Is it though? Look at these side by side (the second one is after adding the code snippet from above). I feel like the one on the right has equal spacing, while the one on the left has more spacing between the top image and text, and less between bottom text and image.

[wongjn]

Ah, I see, thank you. This is because of the my-2 on the <div>. This effectively doubles the top spacing between "Text" and the <div>, due to margin-block-end on the <p> from space-y-2 and the margin-block from the my-2 on the <div>.

I'm not sure what you are trying to achieve with the my-2 on the <div> but possible solutions to solve the inconsistent spacing: https://play.tailwindcss.com/cEswpu5pRq