dcastil
Ring color conflicts with opacity
Describe the bug
I'm following tailwind's usage example for ring opacity. twMerge does not produce the correct classes.
Behavior
- Code:
twMerge(["ring-4 ring-red-500 ring-opacity-50"]) - Expected output:
"ring-4 ring-red-500 ring-opacity-50" - Actual Output:
"ring-4 ring-opacity-50"
To Reproduce
Repro: https://codesandbox.io/p/sandbox/twmerge-ring-opacity-slxpkc
Environment
- tailwind-merge version: 3.3.1
Hey @toppsdown! 👋
Sorry for the long wait, looks like I missed a bunch of notifications.
From the usage example link I infer that you're using Tailwind CSS v2. The last tailwind-merge version that supports Tailwind CSS v2 is v0.9.0, so you'll need to use that.
The Tailwind CSS supports of tailwind-merge looks like this:
- tailwind-merge v0 supports Tailwind CSS v2
- tailwind-merge v1 and v2 support Tailwind CSS v3
- tailwind-merge v3 supports Tailwind CSS v4
Hi @dcastil, thanks for the response.
I'm actually using tailwind 4. I didn't realize they had deprecated ring-opacity in favor of color modifiers.
In that case, the proper classes would be: ring-4 ring-red-500/50
I do think there's still an issue with tw merge though since it removes the "ring-red-500" class. My guess is that it's treating "ring-opacity-50" as though it's a color class and overwriting the previous.
Seems like the proper approach would be to reject deprecated tw classes.
I've got my solution though, so thanks!
Ah yeah that's because tailwind-merge is configured to treat all ring-* classes that don't belong to another group (that includes all unrecognized classes) as a ring color class. So ring-red-500 and ring-opacity-50 are both treated as ring colors and therefore ring-red-500 is removed.
It's not ideal in this situation but the config is built this way because most people tweak their color classes and it would be annoying to have to configure tailwind-merge on any modified color class.
Removing the deprecated ring opacity class should resolve the issue. 👍