compound variants not work with responsive values

[mohammadgarmroodi]

Describe the bug
compound variants does not support responsive values

To Reproduce
https://stackblitz.com/edit/vite-react-tailwind-dtjgiu?file=src%2FApp.jsx

[sebpowell]

I'm running into this issue too – the classes are properly applied, but the Tailwind compiler doesn't seem to pick them up so the styles aren't generated.

[raminrez]

@mohammadgarmroodi
I have forked your example and updated the package (V0.1.18) to the latest version, but I can't see the problem. Can you double-check?

Here is my fork:
https://stackblitz.com/edit/vite-react-tailwind-rucbt4?file=src%2FApp.jsx

[mskelton]

Closing due to lack of reproducability and response.

[Sliov]

Can we reopen this? We merged from cva to tailwind-variants and use compoundVariants quite a lot.

Here's an repro using the latest tailwind-variants version:

https://codesandbox.io/p/sandbox/tailwind-variants-example-forked-4tw75x?file=%2Fsrc%2FApp.tsx%3A39%2C9

[Gomah]

Yeah, it looks like the logic from the regular variants is missing/not implemented for compoundVariants.

cc @mskelton

[Sliov]

@mskelton, @jrgarciadev

Is it intended to work or it is a limitation like it is with Panda CSS?

When using compoundVariants in the recipe, you're not able to use responsive values in the variants.

To be fair, I think implementing this logic will impact performance as it needs to loop against the variants and the responsive screens?

[Jbmanllr]

Wondering as well if it's intended. Guys what's your workarounds?

[Jbmanllr]

To be more specific, compounded values are working, but are not responsive, it apply only to initial value.

[flozero]

Same issue here

[w0ofy]

Bumping this thread because I'm running into this issue too. Is there a fix underway? Or a workaround?

[troymcginnis]

Same issue encountered here as well.

const mediaVariants = tv(
  {
    base: 'w-full flex-1 grow basis-1/2',
    compoundVariants: [
      {
        class: 'order-2 pt-0',
        layout: 'vertical',
        mediaPosition: 'bottom',
      },
    ],
    defaultVariants: {
      fill: false,
      mediaPosition: 'center',
    },
    variants: {
      fill: {
        true: 'relative aspect-[4/3]',
      },
      layout: {
        horizontal: '',
        vertical: '',
      },
      mediaPosition: {
        bottom: 'pt-7',
        center: 'py-7',
      },
    },
  },
  {
    responsiveVariants: true,
  }
)

When initialized with...

mediaVariants({ 
  layout: { initial: 'vertical', sm: 'horizontal' },
  mediaPosition: 'bottom',
})

Will always force the initial breakpoint use case resulting in being stuck with the following:

{
  class: 'order-2 pt-0',
  layout: 'vertical',
  mediaPosition: 'bottom',
}

---

My current workaround feels bad but works okay for my use case:

{
  class: 'max-sm:order-2 max-sm:pt-0',
  layout: 'vertical',
  mediaPosition: 'bottom',
},

Not ideal though. Very dependant on having the breakpoints of this component never change.

[flozero]

my company and I have create a package that achieve this pretty well if you want to have a look and way faster

https://github.com/busbud/tailwind-buddy

[Kinbaum]

@mskelton Raising this issue as well. Here is a test case for responsive compound variants that can be added which currently fails. Note the comment in the expected results array:

describe("Tailwind Variants (TV) - Screen Variants", () => {
  test("should work with responsive compound variants", () => {
    const button = tv(
      {
        base: "text-xs font-bold",
        variants: {
          variant: {
            solid: "border-none bg-blue-500",
            outline: "bg-transparent border border-blue-500"
          },
          size: {
            sm: "text-sm",
            md: "text-md",
            lg: "text-lg"
          }
        },
        compoundVariants: [
          {
            variant: "solid",
            size: "sm",
            className: "bg-red-500"
          }
        ]
      },
      {
        responsiveVariants: true
      }
    );

    const result = button({
      variant: {
        initial: "outline",
        md: "solid"
      },
      size: 'sm'
    });

    const expectedResult = [
      "bg-transparent",
      "border",
      "border-blue-500",
      "font-bold",
      "md:bg-red-500", // expected md:bg-red-500 -- received md:bg-blue-500
      "md:border-none",
      "text-sm"
    ];

    expect(result).toHaveClass(expectedResult);
  });
});

[samogray]

The same issue, compoundVariants is not working for responsive :( , always returned initial value

[Volosojui]

The same issue here. This is a pretty important feature.