Orientation Container Queries in V4

[leemartin]

I was wondering if orientation based container queries were possible in v4? In general, I want to style a child based on the orientation of the parent (not necessarily the size of it.) I half expected this to work:

<div class="@container h-[230px]">
  <div class="@landscape:bg-blue-500 @portrait:bg-green-500">Child</div>
</div>

In this example, the child background should be blue when the container is in landscape and green when in portrait.

I was inspired by this blog and it does work if I write it manually, just wondering how to achieve the same in V4 if possible:

https://www.stefanjudis.com/today-i-learned/size-container-queries-can-detect-landscape-portrait-orientation/

[wongjn]

You could consider using the @custom-variant directive to register a variant which does it:

@import "tailwindcss";

@custom-variant foo (@container (orientation: landscape));
@custom-variant bar (@container (orientation: portrait));

<div class="foo:bg-blue-500 bar:bg-green-500">Child</div>

[leemartin]

I appreciate the help. I gave that a whirl here but it doesn't seem to do anything:

https://play.tailwindcss.com/XWjautH1Ja

Let me know what I'm missing.

[wongjn]

The parent needs container-type: size it seems: https://play.tailwindcss.com/H7uG0d04ZR

[leemartin]

I just worked that out too! Solid advice @wongjn. I appreciate the help.