Grouping variants for a better user experience

[wffranco]

Sometimes we need to apply a lot of classes on variants, and is annoying when we need to repeat a lot of them, also grouping we can reduce posible mistakes.

Let me give you one example and possible solutions:

<button class="bg-blue-500 text-white hover:bg-blue-300 hover:text-gray-200 dark:bg-gray-100 dark:text-gray-600 dark:hover:bg-gray-300 dark:hover:text-gray-700">
  Example
</button>

you can notice we should repeat variants and i'm only changing text/bg colors, sometimes we need much more than that.

then i propose a sintaxis for grouping, i have 2 ideas in mind:

<button class="bg-blue-500 text-white hover:{bg-blue-300,text-gray-200} dark:{bg-gray-100,text-gray-600} dark:hover:{bg-gray-300,text-gray-700}">
  Using brackets and commas
</button>
<button class="bg-blue-500 text-white hover:bg-blue-300,text-gray-200 dark:bg-gray-100,text-gray-600 dark:hover:bg-gray-300,text-gray-700">
  Using only commas
</button>

That way we can join some styles, reducing the amount of written text, and at the same time the generated CSS, it would be a single class for the entire group.

It is a simple example, but you should know that there are cases where many more styles are required for the same variant.

The only commas option can group only final stiles, but with brackets maybe we can sub-group variants, example:

<button class="bg-blue-500 text-white hover:{bg-blue-300,text-gray-200} dark:{hover:{bg-gray-300,text-gray-700},bg-gray-100,text-gray-600,}">
  Using brackets and commas
</button>

[wongjn]

There have been suggestions about adding such a feature. The maintainers have addressed this request before, that you may wish to read up on if you have not already done so:

• A Twitter thread from the creator of Tailwind, Adam Wathan
• A previous GitHub discussion thread with maintainer responses