Responsive Variants Ordering Incorrectly

[rabah]

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

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 😄

[mskelton]

The class order doesn't matter here since Tailwind adds media queries after non-media queries in the generated stylesheet.

My guess is this issue is more than likely an issue with the transformer not working in Vue.

Side note: The Next.js reproduction is broken in a couple ways

[rabah]

The class order doesn't matter here since Tailwind adds media queries after non-media queries in the generated stylesheet.

My guess is this issue is more than likely an issue with the transformer not working in Vue.

Side note: The Next.js reproduction is broken in a couple ways

Thanks for that. That makes sense. 👍🏼

[blowsie]

const variants = buttonVariants({
  size: props.size,
  rounded: props.rounded,
  class: props.class,
});

Is not reactive, if you pass these into the template it will work, which raises a good question, what's the best way to make this reactive in the script?