Setting base when using extendVariants?

[codenomnom]

tailwind-variants receives a base property on the same level as variants, but HeroUI does not support this:

// extendVariants method
BaseComponent: C,
styles: {
  variants?: V;
  defaultVariants?: DV;
  compoundVariants?: CV;
  slots?: S;
},
opts?: Options,

So how for example to put some defaults on the Button component, like "I want all buttons to be upper case"?
As of now I'm going with:

compoundVariants: [ // <- modify/add compound variants
  {
    class: 'font-medium uppercase ...',
  }
]

But that seems utterly unpleasant. Am I missing something?

[wingkwong]

I didn't see you have variants in this example so using extendVariants is not really necessary. If you simply need a button with uppercase, you can create a CustomButton with such class and import it from different pages.

[codenomnom]

Well surely this is just a plain example. I have like 10 custom classes for the button and more than half a dozen variants - alignment, animation, a custom font styling, overall styles, etc. I don't think there's any need to paste any of that here.

The question is - how do I apply base classes? The same goes with Link. I want it to have animation, external link icon, some visual styles, etc.

What I currently do is I use extendVariants directly, like:

export const MyButton = extendVariants(Button, {
  variants: {},
});

If I understand correctly you're suggesting I create a wrapper, which does basic styling, and then extend it?

const InternalButton = (props: ButtonProps) => <Button {...props} className="base styles that I like" />;
export const MyButton = extendVariants(InternalButton, {...});

What's the intention behind omitting the base from tailwind-variants and how hard would it be to implement it?

[codenomnom]

@wingkwong ?