How would I make CVA tailwind aware with tailwind-merge?

[wmonecke]

I am trying to create a medium input but when iconLeading is true I would like the padding to end up like this pr-3 pl-10.

const craftInput = cva(
  [...],
  {
    variants: {
      size: {
        medium: ['text-base', 'h-11', 'px-3'],
      },
      iconLeading: {
        true: 'pl-10',
      },
    },
  },
);

// THIS IS NOT WORKING NEITHER

const craftInput = cva(
  [...],
  {
    variants: {
      size: {
        medium: ['text-base', 'h-11', 'px-3'],
      },
      iconLeading: {
        true: '',
      },
    },
    compoundVariants: [
      {
        size: 'medium',
        iconLeading: true,
        className: 'pl-10 pr-3',
      },
    ],
    defaultVariants: {
      size: 'medium',
      iconLeading: false,
    },
  },
);

I am using tailwind-merge to wrap my craftInput call to make it tailwind aware. However, this is not working. What is my best route here?

PS It is working if I do it the traditional way:

<div
  className={mergeTwClasses(
    'px-3',
    iconLeading ? 'pl-10' : '',  
  )}
/>

but would like it to end up like this eventually:

<div className={mergeTwClasses(craftInput({ size, iconLeading }))} />

[c0nsoleg]

Not sure if I understand your problem correctly (especially this part with mergeTwClasses)

cva([], {
  variants: {
    size: {
      medium: ["text-base"],
    },
    iconLeading: {
      true: [],
      false: []
    }
  },
  compoundVariants: [
    { size: "medium", iconLeading: false, class: ['px-3'] },
    { size: "medium", iconLeading: true, class: ['pl-10', 'pr-3'] }
  ],
  defaultVariants: {
    size: "medium",
    iconLeading: false,
  },
});

element without icon class = text-base px-3
element with leading icon = text-base pl-10 pr-3

[joe-bell]

In [email protected] you'll have the option to extend cx with tools like tailwind-merge – so I'll close this 🚀