Responsive variants

[Razinsky]

Is your feature request related to a problem? Please describe. We are re-writing our component library and want to leverage Tailwind. One big impediment is responsive props. For instance, we have a Card component with two sizes sm | md and we would like to be able to update the size based on the breakpoint. Given that tailwind offers responsive classes out of the box e.g. sm:text-sm md:text.lg, it would be amazing to extend this to variants. I have no idea if this is something that tw-classed can do, though.

Describe the solution you'd like I'd like to have the option to do something like this:

<Card size="sm lg:md" />

This means that the card will have a size sm by default and size md on breakpoint lg.

Describe alternatives you've considered We are toying with some other ideas entirely based on classes like so:

<Card className="card-sm lg:card-md" />

This is not bad but it's a departure from the standard React way of building components with props.