Feature Request: Grouped variant syntax

[just214]

It's often the case that you want to provide the same set of styles for multiple variants. (e.g. focus and hover).

A grouped variant syntax {focus, hover} could provide a more terse way to represent these combined variant styles:

Before:

focus:(bg-gray-800 text-gray-200) hover:(bg-gray-800 text-gray-200) dark:focus:(bg-gray-200 text-gray-800) dark:hover:(bg-gray-200 text-gray-800)

With grouped variant syntax:

{focus,hover}:(bg-gray-200 text-gray-800) dark:{focus,hover}:(bg-gray-200 text-gray-800)

[sastan]

After given this some thought I believe that most use cases could be implemented using the variants config:

setup({
  variants: {
    hocus: '&:hover,&:focus'
  }
})

twind.macro has a lot of examples for this kind of variants: https://github.com/ben-rogerson/twin.macro/blob/16911c0dc75999e7f33edf12039f042fdab50b94/src/config/variantConfig.js

Could this be a viable way?

[just214]

Yes, I think that's the most viable way leading up to v1. Maybe we can raise again in a discussion later to gauge interest.