📐 Add support for min-height container queries

[kieranm]

This PR adds support for min-height on container queries. It does this by introducing new variants...

• @ is retained for backwards compatibility and defaults to width
• @w- container-min-w is an alias of @
• @h- container-min-h is used to set a min-height container query

This is just a proposed approach and I'm totally open to a different one.

I have added some tests as well.

This is my first PR to Tailwind so let me know if you have any feedback or would like me to change anything.

Thanks!

[kieranm]

I haven't updated docs yet but happy to do that as well if/when I get the all clear on the approach

[johnnyreilly]

Nice work!

[kieranm]

Height-based queries will not work unless using container-type: size. I think it would be confusing if height-based queries didn't work out of the box, so I would propose changing the default to size.

My understanding is that inline-size tells the browser only to consider the inline (width) axis, but size tells it to consider both axes. I'm not sure why this distinction is necessary.

I can't think of a good reason not to use size as the default - and I don't think this change is breaking (size feels like a superset of inline-size), but my knowledge is limited.

If this will be a problem then maybe we need another approach.

[kieranm]

For some reason, I could not get both arbitrary values and named containers working at the same time with the @w and @h prefixes. Removing the @ and using a more verbose name works though. I added some test cases for this.

I have replaced...

• @w with container-min-w
• @h with container-min-h

Someone with more knowledge of the Tailwind internals might be able to explain this.

[reinink]

@kieranm Hey! Thanks for this contribution, and well done getting your first Tailwind PR under your belt 💪

I totally agree that this is a cool idea. We actually spent lots of time thinking through this exact problem when we first developed the container queries plugin, but we had a really hard time coming up with an API that we liked. Ultimately we decided to just stick with the width based stuff to start, especially since that's seems to be the most common use case by far — similar to the width based media queries in Tailwind.

Looking at this PR, I'm not convinced that this API is exactly right either, so I'm going to close this one for now, especially since we don't have time at the moment to pick up this work. Thanks either way for this contribution, and I think it will be a helpful reference either way down the road if we get back into this — which I suspect we eventually will 👍

[kieranm]

That does suck but at least others can use it as a reference if they need it.

[JOSEJESUSOCHOA]

We really needed it, and sadly it was not integrated.

[midblep]

+1, would love to eventually be able to do this

[sergio-agosti]

I'd love to see this available, too!

[AndrewSGould]

Also looking for this functionality

[horlah]

This could have saved my life right now. 🥺

[EdmundChaplin]

Would be useful

[prag-matt-ic]

Yeah, height based container queries would be a handy tool!

[Ericlm]

I also think this would be very useful, and would be great to be able to mix even both like @container (min-height: 10rem) and (min-width: 20rem).

For example, this kind of CSS query is necessary when both height and width car be manipulated by the user. 🙂

[slarsendisney]

Bump on this - height container queries would be super useful.

[vagnereix]

🥲