Transition gradient not working

[tiagobbraga]

Describe the bug

Gradient transition does not work.

To Reproduce

I applied these styles in a button:
transition-all duration-250 ease-linear bg-gradient-to-r to-color-one via-color-one from-color-two bg-size-200 bg-pos-0 hover:bg-pos-100

And too setted these extension in my tailwind.config.ts

...
backgroundSize: {
 "size-200": "200% 200%",
},
backgroundPosition: {
 "pos-0": "0% 0%",
 "pos-100": "100% 100%",
},
...

The button has these a default style
inline-flex items-center justify-center whitespace-nowrap text-sm rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50

But the transition does not work.

Expected behavior

E.g. Without merge:
https://play.tailwindcss.com/XFQDCOKQ8L

Environment

• tailwind-merge version: [e.g. 2.4.0]

---

I removed the merge and so worked.

[dcastil]

Hey @tiagobbraga! 👋

tailwind-merge doesn't have access to the tailwind.config.ts file and you need to configure it separately so it knows about the text-button class.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v2.4.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config.

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v2.4.0/docs/configuration.md#usage-with-custom-tailwind-config.

---

Related: #368, #322, #321, #315, #302, #276, #275, #274, #250, #207

[tiagobbraga]

Thanks @dcastil!

[dcastil]

No problem! 😊 Let me know if you get stuck somewhere and feel free to close this issue in case your problem is resolved.

[dcastil]

Closing this one as resolved.