[v4] Container height queries

[jkbmat]

Hello everyone!

Using @tailwindcss/container-queries in v3, I had a custom breakpoint defined on container height as follows:

tall: {
  raw: "(min-height: 50rem)",
}

Looking into the documentation, it seems that the first party container query support in v4 only includes container width queries.

Is there a way to use a container height query?

[wongjn]

You could use @custom-variant like:

@custom-variant @tall (@container (min-height: 50rem));

https://play.tailwindcss.com/CLLerYq5VT

[jkbmat]

That's awesome, I'm going to need to read up on @custom-variant as it seems really powerful. Thank you @wongjn!