`translate` classNames moving the component twice as far

[5ZYSZ3K]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

There is an issue:
When I pass just one translate class (e.g. translate-x-1), the component gets moved as expected
But, when I pass two classes, e.g. translate-x-1 translate-y-1, then it gets moved twice as far in both directions.

Basically:
translate-x-1 gets parsed to {transform: [{translateX: 4}, {translateY: 0}]}
translate-x-1 translate-y-1 gets parsed to {transform: [{translateX: 4}, {translateY: 4}, {translateX: 4}, {translateY: 4}]}
Transform objects are doubled, which causes it to move twice as far

Library version

3.0.7

Environment info

System:
  OS: macOS 26.3.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 182.69 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /Users/pawelporeba/.asdf/installs/nodejs/22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/pawelporeba/.asdf/installs/nodejs/22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: /Users/pawelporeba/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/pawelporeba/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.5
      - iOS 26.5
      - macOS 26.5
      - tvOS 26.5
      - visionOS 26.5
      - watchOS 26.5
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-31 | Google Play ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
      - android-37.0 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.30387.90.2532.14935130
  Xcode:
    version: 26.5/17F42
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: javac 17
    path: /Users/pawelporeba/.asdf/shims/javac
  Ruby:
    version: 3.3.3
    path: /Users/pawelporeba/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.3
    wanted: ^20.1.3
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.6
    wanted: 0.83.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

You just need to pass two translate classes at once, e.g. translate-x-1 translate-y-1

Reproducible example repository

https://github.com/5ZYSZ3K/react-native-css-translation-repro

[github-actions]

🤖 Auto-triage

Status: CONFIRMED
Type: bug
Version: v5

Findings

Reproduced via Jest using the Tailwind pipeline. translate-x-1 alone produces transform: [{translateX: 3.5}, {translateY: 0}] as expected, but combining translate-x-1 translate-y-1 produces [{translateX: 3.5}, {translateY: 3.5}, {translateX: 3.5}, {translateY: 3.5}] — the transform array is duplicated, matching the reporter's description exactly.

What I tested

• Wrote a Jest test using renderSimple against the live Tailwind v4 pipeline (src/__tests__/vendor/tailwind/_tailwind).
• className: "translate-x-1" → passes (single translateX/translateY pair).
• className: "translate-x-1 translate-y-1" → fails with duplicated transform entries (received +6 lines = 2 extra objects).

Next steps

• Likely a declaration-merging issue in src/compiler/declarations.ts or transform-shorthand handling when multiple rules each emit a full transform array via var(--tw-translate-x)/var(--tw-translate-y). The doubling suggests both rules' transform arrays are being concatenated rather than the later rule overriding the earlier one for shorthand transform.
• Worth checking how cascaded transform declarations from separate class rules are flattened — looks like array spread/concat where assignment was intended.
• Existing vendor test rotate-90 skew-y-1 translate-x-1 passes, so the bug likely manifests only when multiple classes set the same Tailwind transform CSS var family in a way that causes duplicate transform: var(...) declarations to both be applied.

---

_{This is an automated triage. See auto-triage.yml.}