Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add matchVariant API #8310

merged 6 commits into from May 17, 2022

Add matchVariant API #8310

merged 6 commits into from May 17, 2022


Copy link

@RobinMalfait RobinMalfait commented May 9, 2022

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 }) {
        '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

Copy link

@adamwathan mentioned this could be used for container queries

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

Copy link

@adamwathan mentioned this could be used for container queries

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 ...">

@RobinMalfait RobinMalfait changed the title WIP: Add matchVariant API Add matchVariant API May 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

3 participants