[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

[wongjn]

The solution seems to be accepted as the first post in this thread: #16043 (comment)

[TimeoCHATELAIN]

This doesn't work, otherwise I wouldn't have dared to ask, possibly I don't quite understand how to use the @custom-variant.

[TimeoCHATELAIN]

Sorry bro for the disturbance, i saw your example again and i got it, you are my GOAT

[mathewcst]

Is it possible to make the variant dynamic? E.g. @tall-[200px]:bg-red or @tall-32:bg-red?

I have a need for a variant/utility based on container height but I don't want to register 5 different variants for it.

Current workaround is to use the actual CSS container: <div class="[@container(height>200px)]:bg-red">

[wongjn]

No, can't make it dynamic.