tailwind1-12  Exercise 2: A Badge Component with cva
=====================================================

badge.mjs:

  import { cva } from 'class-variance-authority';
  import { twMerge } from 'tailwind-merge';

  export const badge = cva('inline-block rounded-full font-medium', {
    variants: {
      color: { gray: 'bg-gray-100 text-gray-800', green: 'bg-green-100 text-green-800', red: 'bg-red-100 text-red-800' },
      size:  { sm: 'px-2 py-0.5 text-xs', md: 'px-3 py-1 text-sm' },
    },
    compoundVariants: [{ color: 'red', size: 'md', class: 'uppercase tracking-wide' }],
    defaultVariants: { color: 'gray', size: 'sm' },
  });

  console.log(badge());
  console.log(badge({ color: 'green' }));
  console.log(badge({ color: 'red', size: 'md' }));
  console.log(badge({ class: 'px-4 bg-black' }));
  console.log(twMerge(badge({ class: 'px-4 bg-black' })));

Output (node badge.mjs, class-variance-authority 0.7.1, tailwind-merge 3.7.0):

  inline-block rounded-full font-medium bg-gray-100 text-gray-800 px-2 py-0.5 text-xs
  inline-block rounded-full font-medium bg-green-100 text-green-800 px-2 py-0.5 text-xs
  inline-block rounded-full font-medium bg-red-100 text-red-800 px-3 py-1 text-sm uppercase tracking-wide
  inline-block rounded-full font-medium bg-gray-100 text-gray-800 px-2 py-0.5 text-xs px-4 bg-black
  inline-block rounded-full font-medium text-gray-800 py-0.5 text-xs px-4 bg-black

WHY THIS WORKS AS AN ANSWER
---------------------------
badge() with no argument uses the defaults (gray, sm). Each named option adds the classes for its choice, and the compound rule adds uppercase and tracking-wide only for the one combination
red + md, as the third line shows and the others do not. The fourth call passes an extra class: cva just appends it, so the string now contains two px- classes and two bg- classes, a conflict the
browser would settle by stylesheet order. twMerge on the last line removes the earlier px-2 and bg-gray-100 and keeps the caller's px-4 and bg-black; it correctly leaves text-gray-800 (colour), py-0.5
and text-xs (size) alone because those set different properties. Since the final classes still appear in full in the source, Tailwind can find them when it scans the files.