Only Last Color Variant Applied When Combining Text Size and Color Variants
GabeConsalter opened this issue · 3 comments
Describe the bug
Hello everyone, I've been using tailwind-variants and noticed a possible issue. When trying to use one variant to determine the text size and another variant to determine the text color, only the last color variant is applied in the final result, perhaps due to the className being the same with text-*.
This example code:
To Reproduce
Steps to reproduce the behavior:
- Create a scenario where you use tailwind-variants.
- Attempt to apply one variant to determine the text size.
- Apply another variant to determine the text color.
- Notice that in the final result, only the color variant applied last is taking effect.
Expected behavior
When combining text size and color variants using tailwind-variants, both variants should be applied successfully to the text, resulting in the specified size and color. Currently, only the last color variant is taking effect, and the expected behavior is to have both variants applied simultaneously.
Screenshots
The text size variant was not applied.
Desktop (please complete the following information):
- OS: macOS
- Browser chromium
- Version 122.0.6261.94
Additional context
I conducted a test using the class-variance-authority library, and there was no occurrence of the mentioned problem.
This example code:
Result:
The text size variant was applied.
This is not a tailwind-variants bug, rather you'll need to configure tailwind-merge with your custom colors so it knows how to merge the classes properly. cva doesn't use tailwind-merge which is why it doesn't have the same issue.
You can read about configuring tailwind merge in the docs:
Thanks @mskelton. I didn't know there was this need for configuration with tailwind-merge. Do you have some link from docs about it?
@GabeConsalter I posted links in my comment above.