space-x- and space-y- breaking change

[kocv59]

What version of Tailwind CSS are you using?

v4.1.3

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

webpack 5.98.0
postcss 8.5.3
postcss-loader 8.1.1

What version of Node.js are you using?

v20.19.0

What browser are you using?

Chrome

Describe your issue

space-x- and space-y- don't work with all the values in https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start like inherit, initial and revert (space-x-[revert]). It worked in tailwind 3 but it's a breaking change. It's trying to use those words with calc which isn't possible.

	
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(<value> * var(--tw-space-x-reverse));
  margin-inline-end: calc(<value> * calc(1 - var(--tw-space-x-reverse)));
};

[philipp-spiess]

Hey there! What exactly is the syntax that worked with v3? I tried space-x-[revert] and the others in the playground and it seems to behave the same there: https://play.tailwindcss.com/cE8PAWA99Q

[kocv59]

I can't reproduce either it was working a long time ago maybe it was added as a custom utility. The same problem is with all arbitrary values because most props take the same global values. Tailwind shouldn't generate them with calc because that's not valid in the css spec.

[kocv59]

Some utilities like margin and width work with global values like [revert] but space-x- and space-y- don't.

I think css global values shouldn't need to use arbitrary value. m-revert should be supported instead of m-[revert].