Extending order

[thefalked]

I've just notice that when i use extend, the extend classes are being set first.

For example, this is an example used on the Extending components with variants we have rounded-sm being first of all other classes of the baseButton variants.

import { tv } from 'tailwind-variants';
 
const baseButton = tv({
  base: 'font-semibold text-white rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    size: {
      small: 'py-0 px-2 text-xs',
      medium: 'py-1 px-3 text-sm',
      large: 'py-1.5 px-3 text-md'
    }
  }
});
 
const myButton = tv({
  extend: baseButton,
  variants: {
    isSquared: {
      true: 'rounded-sm'
    }
  }
  // custom button styles
});
 
myButton({ color: 'success', size: 'medium', isSquared: true });
 
/**
 * Result:
 * font-semibold text-white active:opacity-80 rounded-sm bg-purple-500 hover:bg-purple-700 py-1 px-3 text-sm
 */

Since i'm extending the baseButton i would expect that the classes become the last so they can override the baseButton classes.

Instead of the Result:

/**
 * Result:
 * font-semibold text-white active:opacity-80 rounded-sm bg-purple-500 hover:bg-purple-700 py-1 px-3 text-sm
 */

Should be like this:

/**
 * Result:
 * font-semibold text-white active:opacity-80 bg-purple-500 hover:bg-purple-700 py-1 px-3 text-sm rounded-sm
 */

My question is: is this intentional or should we change it?

[mskelton]

@thefalked The order of classes doesn't technically matter since we are using tailwind-merge to resolve conflicting classes. The order of classes is indeed in the order of baseButton then myButton, but it's per set of classes (e.g. base, then variants, then compound variants, etc.) not all classes from baseButton, then all classes from myButton.

If this is causing issues in your project, it's more than likely due to custom tailwind classes which tailwind-merge doesn't know how to properly merge. We have some docs explaining how to resolve that:

https://www.tailwind-variants.org/docs/config#twmerge