Combining media queries in TW4

[m-shum]

Hi all,
I'm trying to figure out how to combine media queries in TW4 – specifically something like TW's default 'md' screen query AND a hover:hover query. In v3 we were able to extend screens with custom MQs, but I can't find any information on how to do this in TW4's CSS config. There's information on defining breakpoints, but nothing regarding hover and the documentation for using arbitrary values seems to be focused on screen sizes rather than hover support.

[wongjn]

If you are making a new variant, you can do:

@custom-variant foo {
  @variant md {
    @media (hover: hover) {
      @slot;
    }
  }
}

<div class="foo:text-red-500">

[m-shum]

@wongjn Oh interesting, thank you! If I needed this to be available for every screen-size MQ, would I need to add a custom variant for each? I guess what I'm asking is whether there's a way to combine tailwind's screen size MQ with a custom one to get something like md:hover:. I know there's probably never going to be a need for something like max-width && hover, I'm just curious.

[wongjn]

You could split it up like:

@custom-variant foo (@media (hover: hover));

<div class="foo:md:text-red-500 foo:lg:bg-blue-200">

[m-shum]

@wongjn That's exactly what I'm after, thank you!!

[rozsazoltan]

Just a related: hover OR focus in Tailwind CSS and TailwindCSS @screen how to use