Tailwind merge wrongly merge background-opacity with background-color.
Closed this issue · 2 comments
Describe the bug
When background-color is used with background-opacity, the latter written will be removed by tailwind-merge. This disallows any efforts to make transparent effects.
To Reproduce
https://codesandbox.io/p/sandbox/unruffled-bose-cssr35?file=%2Fsrc%2Findex.ts%3A21%2C71
Expected behavior
background-color and background-opacity should not collide. Both of the classes should be kept.
Environment
- tailwind-merge version: 2.4.0
Hey @ngtrthinh169TPC! 👋
This is indeed a bug. The problem is that tailwind-merge only accepts numbers within arbitrary values of opacities and then erroneously defaults to classify it as a background-color class. I'll fix it in the coming days.
In the meantime you can work around it by using bg-opacity-[0.48] instead. That should work without issues.
This was addressed in release v2.5.0.