tailwind-variants icon indicating copy to clipboard operation
tailwind-variants copied to clipboard

Responsive Variants Ordering Incorrectly

Open rabah opened this issue 2 months ago • 2 comments

Describe the bug When using responsive variants to style components in either React or Vue (I just tested with both), the classes do not seem to order correctly. It seems like the initial value is always in front of the other values in the class list order which means the correct styles are not applied at the correct break points.

To Reproduce Steps to reproduce the behavior: I created a reproduction on stackblitz for both Nuxt & Next. Nuxt: Stackblitz Link Next: Stackblitz Link

if you see the object styling provided by tailwind-variants it should conditionally display the rounded styles only initial, but then at a higher breakpoint, it should not display the rounded styles. I have correctly wrapped the tailwind config with the withTV function.

Expected behavior I should correctly display the relevant styles at each breakpoint.

Screenshots Nuxt Button with Incorrect class ordering CleanShot 2024-04-13 at 12  36 14@2x

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Arc
  • Version 1.38

Additional context I may be doing something wrong but after copying the instructions from the site with no success, im stuck 😄

rabah avatar Apr 12 '24 23:04 rabah