Support for translate-* utilities in Tailwind CSS v4 (missing implicit transform behavior)

[omrfrkcpr]

Describe the bug

In Tailwind CSS v4, the translate-* utilities no longer require the transform base class, because they use the native translate property directly (e.g., translate: 50% 0). However, tailwind-merge still assumes that translate-* depends on transform, which leads to unexpected class merging behavior.

Classes like translate-x-1/2 are either dropped or not properly merged unless an unnecessary transform class is added manually, even though it has no effect in v4.

To Reproduce

Use tailwind-merge with the following:

twMerge("translate-x-1/2")
// Expected: "translate-x-1/2"
// Actual: gets dropped or ignored unless "transform" is added

But in Tailwind CSS v4, this class works perfectly fine on its own, because:

.translate-x-1\/2 {
  translate: 50% 0;
}

Expected behavior

tailwind-merge should not require the transform class for translate-* utilities in Tailwind CSS v4. It should treat them as standalone, valid utilities.

Expected output:

twMerge("translate-x-1/2") 
// => "translate-x-1/2" ✅

No need for:

twMerge("transform translate-x-1/2") 
// This is redundant in Tailwind v4

Environment

• tailwind-merge version: [3.3.1]
• tailwindcss version: [4.1]
• package manager: [yarn]
• framework: [next.js, typescript]

Additional context

This is due to a major change in Tailwind CSS v4, where transform-related utilities (translate, rotate, scale, skew) use native properties like translate, rotate, and scale, and no longer depend on the transform class.

It would be ideal if tailwind-merge could support this change, perhaps by version awareness or by updating the merge logic for transform-related utilities.

[dcastil]

Hey @omrfrkcpr! 👋

The translate-* classes should be independent from the transform class and doesn't get removed without it. I tested it here: https://codesandbox.io/p/sandbox/rfv2h5

Could it be that there is something wrong elsewhere?

[omrfrkcpr]

Hey @dcastil Thanks for feedback.

You're right in theory, but in practice, with Tailwind v4 and tailwind-merge, translate-x-* doesn’t take effect unless transform is also explicitly present.

It seems like the class stays in the DOM, but the actual translate: ... rule doesn’t apply unless transform triggers it — likely due to how Tailwind v4 changed the output structure.

See the screenshots and video — adding transform fixes the alignment.

https://github.com/user-attachments/assets/4677844c-02a9-4907-9a4c-4869a6f4c52c

[dcastil]

Isn't it the other way around? Looks like the translate only gets applied when the transform class isn't present.

Just tried it out in the Tailwind CSS playground and there the translate works no matter whether I add or remove the transform class: https://play.tailwindcss.com/dBRIHDLwRN. Maybe you have some custom CSS defined with the transform class?

Anyway, that is outside of the scope of tailwind-merge. This library only controls which individual classes are removed from the input string and doesn't have access to the actual CSS associated with the classes.

[omrfrkcpr]

I think there might still be a bit of misunderstanding. You’re absolutely right that the translate utility in Tailwind works without explicitly adding the transform class — that’s how Tailwind is designed, and it does behave that way in the Playground.

However, the issue I’m facing specifically happens when using tailwind-merge. In my case, after the classes are merged, the translate styles are not being applied unless I manually include the transform class as a workaround.
So the core problem isn’t whether the class is being removed or not — it’s more about the resulting set of classes after merging, and how that affects the final CSS output. It seems like something in the merged result is preventing the transform from being properly applied.

Hope that clarifies what I meant a bit better 🙏

[dcastil]

Hey! Thanks for the wait, I somehow forgot to get back to this.

I'm not sure what you mean. Can you show me an example with the inputs to twMerge(), its actual output and what output you'd expect?