Can't override default `translate-*-px`

[aimryoui]

What version of Tailwind CSS are you using?

For example: v4.1.18

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

For example: postcss 8.5.6, Next.js 16.1.4

What version of Node.js are you using?

For example: v22.18.0

What browser are you using?

For example: Chrome, Hellium

What operating system are you using?

For example: Windows

Reproduction URL

https://play.tailwindcss.com/4ilgjQxWWO

Describe your issue

I want to override default px unit of Tailwind from 1px to 1.5px. Other properties work fine, but translate.

@import "tailwindcss";

@theme {
  --translate-x-px: var(--px);
  --translate-y-px: var(--px);
}

:root {
  --px: 15px;
}

(I've changed 1.5px to 15px for clearer result)

And then using it:

<div class="border">
  <p class="translate-x-px">
    Link translate-x Only
  </p>
</div>

Result:

It did translate by x-axis 1px (not new 15px), but also translate by y-axis 15px, which is unexpected result. Which means Tailwind allows me to customize the --translate-*-px somehow but it didn't work properly.