Add matchVariant API

[RobinMalfait]

This is a very very basic version and WIP PR to add the matchVariant API.

This allows you to register a variant using "arguments" (just like you can with arbitrary value plugins). The API would be something like this:

let plugin = require('tailwindcss/plugin')

let config = {
  // ...
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant({
        'group-hover': (name) => `:merge(.group-${name}):hover &`,
      })
    }),
  ],
}

This now allows you to pass an "argument" to the group-hover, e.g.: group-hover-[x]:underline group-hover-[y]:font-bold. For this example, it would generate the following css:

.group-y:hover .group-hover-\[y\]\:font-bold {
  font-weight: 700;
}

.group-x:hover .group-hover-\[x\]\:underline {
  text-decoration-line: underline;
}

Now you can have "named" groups.

Note: Keep in mind that this is just an example plugin, once this PR is ready we will make sure that the existing group-hover variants (and friends) are converted and accept some form of argument if it makes sense.

---

This feature is a missing piece in our set of exposed tools. We provide you with tools, one tool is a bit sharper than the other. It's up to you and your team to decide whether you want to use them and when to use them.

Here is a quick table overview on each tool and how "sharp" they are, don't hurt yourself!

	Utilities	Variants
Constrained, based on config	bg-red-500	group-hover:underline
Partial escape hatch	bg-[#1D9BF0] (Twitter blue color)	group-[focus]:underline (* new in this PR)
Full escape hatch	[scrollbar-gutter:stable]	[&>*]:underline

• The Twitter blue color is not part of your design configuration, it doesn't always make sense to
  add those values to your configuration. You can use inline styles, but now this makes it a bit
  easier for effects like "Make all logos gray until hovered" bg-gray-100 hover:bg-[#1D9BF0].
• The group-[focus] can be used for cases where you want all the same group-X logic, but just
  have to use a one-off "state". Maybe this state doesn't exist in Tailwind CSS yet and is just
  required here.
• The [scrollbar-gutter:stable] is an arbitrary property. This is useful if Tailwind CSS is
  missing some utilities and you still want to leverage all the capabilities from Tailwind CSS.
  E.g.: when you want to change this property on hover [scrollbar-gutter:stable] hover:[scrollbar-gutter:revert]
• The [&>*]:underline is also an escape hatch that allows you to modify the selector to which the
  utilities should apply. This &>* is commonly known as the children variant.

The partial escape hatches are useful if you want to use the existing utility/variant but just want to change this one little part.
The full escape hatches are useful if Tailwind CSS doesn't provide the tools "natively" yet and if
you want to play with new CSS already or if you are just playing around before creating an actual
plugin.

[dorianmariecom]

@adamwathan mentioned this could be used for container queries https://twitter.com/adamwathan/status/1524162533766189057?s=20&t=WzlBb6E-juc9nT-4mMNKnA

I'm curious how it would look like with this API

[adamwathan]

@adamwathan mentioned this could be used for container queries https://twitter.com/adamwathan/status/1524162533766189057?s=20&t=WzlBb6E-juc9nT-4mMNKnA

I'm curious how it would look like with this API

Not 100% committed to a specific API yet but I imagine something like:

<div class="block container-[400px]:flex ...">