Some class names break tv

[cschroeter]

I'm not sure if a bug or a limitation I am not aware of:

import { tv } from 'tailwind-variants';

const text = tv({
  base: 'text',
  variants: {
    variant: {
      heading: 'text--variant_heading',
      // heading: 'foo' <-- works just fine
    },
    size: {
      sm: 'text--size_sm',
      md: 'text--size_md',
      lg: 'text--size_lg',
    },
  },
});

const className = text({ size: 'sm', variant: 'heading' });

console.log(className);

In this example the expected result is text text--variant_heading text--size_sm but it is text text--size_sm

https://stackblitz.com/edit/typescript-hbtnpj?file=index.ts

[Kogomre]

Hi i have this problem to, when i use text-tn rounded-sm text-default-foreground, i get rounded-sm text-default-foreground, and one more problem border-md border-base-primary => border-base-primary.

[pdolezal0]

Hey, it looks like u are using custom classnames. Try to opt-out of using tailwind-merge: https://www.tailwind-variants.org/docs/api-reference#twmerge. Or extend your tailwind-merge configuration: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/recipes.m also u can look how it's implemented inside EpicDev Stack :) https://github.com/epicweb-dev/epic-stack/blob/main/app/utils/misc.tsx#L45

[cschroeter]

@pdolezal0

Thank you so much. That actually was a good hint. Since I only have those custom class names I can simply disable twmerge like so and it works:

const text = tv(
  {
    base: 'text',
    variants: {
      variant: {
        heading: 'text--variant_heading',
      },
      size: {
        sm: 'text--size_sm',
        md: 'text--size_md',
        lg: 'text--size_lg',
      },
    },
  },
  { twMerge: false }
);