search

nextui-org / tailwind-variants

🦄 Tailwindcss first-class variant API
https://tailwind-variants.org
MIT License
2.42k stars 70 forks source link

Only Last Color Variant Applied When Combining Text Size and Color Variants #166

Closed GabeConsalter closed 8 months ago

GabeConsalter commented 8 months ago

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: image

To Reproduce Steps to reproduce the behavior:

  1. Create a scenario where you use tailwind-variants.
  2. Attempt to apply one variant to determine the text size.
  3. Apply another variant to determine the text color.
  4. 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 image The text size variant was not applied.

Desktop (please complete the following information):

Additional context I conducted a test using the class-variance-authority library, and there was no occurrence of the mentioned problem.

This example code: image

Result: image The text size variant was applied.

mskelton commented 8 months ago

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:

GabeConsalter commented 8 months ago

Thanks @mskelton. I didn't know there was this need for configuration with tailwind-merge. Do you have some link from docs about it?

mskelton commented 8 months ago

@GabeConsalter I posted links in my comment above.