RFC: Responsive variants should utilize responsive modifiers with max-*: modifiers

[Kinbaum]

Consider the following button component using responsive variants, we have a solid button, and an outline button.

const button = tv(
  {
    base: 'text-xs font-bold',
    variants: {
      variant: {
        solid: 'bg-blue-500',
        outline: 'border border-blue-500'
      }
    }
  },
  {
    responsiveVariants: true
  }
);

If I wanted to control which variant is utilized for a given breakpoint, it would look something like this:

const usage = button({
  variant: {
    initial: 'solid',
    md: 'outline'
  }
});

This is the standard approach that we've all been using, but there is an issue with this. Have a look at the resulting classes:

const output = [
  'text-xs',
  'font-bold',
  'bg-blue-500',
  'md:border-blue-500',
  'md:border'
];

Here we can see that the initial styles are leaking into the variant that has been selected for the medium break point. In this example, we can see bg-blue-500 has leaked into the outline variant, and that is not the behavior we want.

What I would like to propose is that we make use of the max-*: modifier in combination with the responsive modifier to ensure these initial styles do not cross over multiple break points.

Here is what the output would look like for the example I'm describing:

const output = [
  'text-xs',
  'font-bold',
  'max-md:bg-blue-500', // Using `max-md:`
  'md:border-blue-500',
  'md:border'
];

Here you can see that the initial variant classes are prefixed with max-md:. This is because I've only specified the medium breakpoint in my usage. If I had multiple breakpoints, then I would expect the same type of behavior using tailwind's range media queries.

As and example, lets reconfigure the button and add a third variant ghost:

const button = tv(
  {
    base: 'text-xs font-bold',
    variants: {
      variant: {
        solid: 'bg-blue-500',
        outline: 'border border-blue-500',
        ghost: 'h-fit shadow-sm'
      }
    }
  },
  {
    responsiveVariants: true
  }
);

Now I am going to update my usage of the button to the following:

const usage = button({
  variant: {
    initial: 'solid',
    md: 'outline',
    lg: 'ghost'
  }
});

Given that this button now makes use of more than one variant, and we still need to ensure that no classes from other variants cross over, the following output would ensure that this is not a problem:

const output = [
  'text-xs',
  'font-bold',
  'max-md:bg-blue-500', 
  'md:max-lg:border-blue-500',
  'md:max-lg:border',
  'lg:h-fit',
  'lg:shadow-sm'
];

The current approach contaminates each variant with unnecessary classes to counteract styles leaking. For instance, when dealing with a solid and an outline variant, one must meticulously add a bg-transparent class to the outline variant to eliminate the background, and conversely, append a border-none class to the solid variant. This quickly spirals into an unwieldy and unmanageable situation.

To unlock the full potential of responsive variants and elevate their effectiveness, I believe we should anticipate a more refined behavior. A variant should seamlessly swap styles without the need for convoluted workarounds.