[v4] space-{x,y}-* doesn't work (anymore) in combination with -m-0.5

[tsboh]

What version of Tailwind CSS are you using?

in v4.0.8 it doesn't work (anymore)
in v3.4.17 does work

What build tool (or framework if it abstracts the build tool) are you using?

"dependencies": {
"@tailwindcss/vite": "^4.0.7",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-vue-next": "^0.475.0",
"radix-vue": "^1.9.15",
"reka-ui": "^2.0.0",
"tailwind-merge": "^3.0.1",
"tailwindcss-animate": "^1.0.7",
"vue": "^3.5.13"
},
"devDependencies": {
"@types/node": "^22.13.4",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.20",
"tailwindcss": "^4.0.7",
"typescript": "~5.7.2",
"vite": "^6.1.0",
"vue-tsc": "^2.2.0"
}

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome: Version 133.0.6943.99 (Official Build) (x86_64)
Brave: Version 1.75.178 Chromium: 133.0.6943.98 (Official Build) (x86_64)
Safari: Version 18.3 (20620.2.4.11.5)
Firefox: 135.0 (64-bit)

in all these browsers, the issue shows up the same way

What operating system are you using?

macOS Sequoia 15.3.1
Intel Core i9

Reproduction URL
https://play.tailwindcss.com/yTHsE1Wbew

Describe your issue

As you can see here in the preview pane, space-x-1 produces the proper white space between the items/blue circles:

As you can see here in the preview pane, space-x-1 does not produces the proper white space between the items/blue circles anymore in tailwind v4:

To be clear: I just switched from version v3.4.17 to v4.0.8 in the dropdown, did nothing else

Thank you, and Cheers

[tsboh]

Oh, important I guess: when I remove all the '-m-0.5' it works as expected:

(that's the reason I mentioned it in the title of the issue)

[wongjn]

Yep, so the space-x/y-* behave slightly differently in v4:

Space-between selector

We've changed the selector used by the space-x-* and space-y-* utilities to address serious performance issues on large pages:

/* Before */
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}

/* Now */
.space-y-4 > :not(:last-child) {
  margin-bottom: 1rem;
}

You might see changes in your project if you were ever using these utilities with inline elements, or if you were adding other margins to child elements to tweak their spacing.

If this change causes any issues in your project, we recommend migrating to a flex or grid layout and using gap instead:

-<div class="space-y-4 p-4">
+<div class="flex flex-col gap-4 p-4">
   <label for="name">Name</label>
   <input type="text" name="name" />
 </div>

Essentially, "you were adding other margins to child elements to tweak their spacing".