Experimental support for variant grouping

[RobinMalfait]

This PR implements a highly requested feature for grouping variants together. https://twitter.com/adamwathan/status/1461519820411789314

Caveat: This only improves developer experience. Your bundle sizes will be bigger because there will be more css. Even after using brotli / gzip, it will still be bigger because there is less repetition going on to benefit from compression.

Also keep in mind that Tailwind CSS is a build-time tool and not a runtime tool. We are also not rewriting your source files which is why there are some downsides in bundle size.

The syntax allows you to group utilities for a given variant. Since these classes actually end up in your HTML, it means that you can't use spaces, instead you can use a , to separate your utilities.

Before:

<button
  type="button"
  class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
  Button text
</button>

After:

<button
  type="button"
  class="focus:(outline-none,ring-2,ring-offset-2,ring-indigo-500)"
>
  Button text
</button>

You can nest variants and apply multiple variants at the same time.

If you are brave, while not recommended, you can also combine all crazy variations of it at the same time...
Input:

<div class="dark:[@supports(hover:hover)]:hover:[&>*]:([--potato:baked],bg-[#0088cc])"></div>
            ──┬─ ───────────┬────────────       ──┬──  ────────┬─────── ─────┬──────
              │             │                     │            │             ╰── Arbitrary value
              │             │                     │            ╰──────────────── Arbitrary property
              │             │                     ╰───────────────────────────── Arbitrary variant (custom selector)
              │             ╰─────────────────────────────────────────────────── Arbitrary variant (at-rule wrapper)
              ╰───────────────────────────────────────────────────────────────── A normal variant

Generates 😅:

@media (prefers-color-scheme: dark) {
  @supports (hover: hover) {
    .dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
      bg-\[\#0088cc\]\)
      > *:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(0 136 204 / var(--tw-bg-opacity));
      --potato: baked;
    }
  }
}

---

This feature is currently experimental and doesn't have proper intellisense / prettier sorting support. You can try it using the insiders build and by enabling the feature flag:

// tailwind.config.js
module.exports = {
  experimental: {
    variantGrouping: true,
  },
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

[ztxone]

Please please please!
Can you make syntax of grouping like Windicss without commas? https://windicss.org/features/#variant-groups

[Nefcanto]

@RobinMalfait does it keep the output size low? I mean, does it first break the grouped classes into separate classes and compiles them after that?

Also, https://github.com/milamer/tailwind-group-variant has done the same job. I guess you can take notes from it. I mean it should be possible to not use commas and use white spaces.

Thank you