Container Queries support

[dlebedynskyi]

One of great features in Tailwind v4 compared to v3 is full support of container queries in combination with media queries.

I'd like to ask for uniwind to support this as feature as well.

Examples from tailwind docs:

Use the @container class to mark an element as a container, then use variants like @sm and @md to style child elements based on the size of the container:

<!-- using parent as container -->
<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

<-- Using Named Containers --> 
<div class="@container/main">
  <!-- ... -->
  <div class="flex flex-row @sm/main:flex-col">
    <!-- ... -->
  </div>
</div>

We could also set repsective css variables

@import "tailwindcss";
@theme {
  --container-8xl: 96rem;
}

to use those later in layout like

<div class="@container">
  <div class="flex flex-col @8xl:flex-row">
    <!-- ... -->
  </div>
</div>

or just use arbitrary value

<View class="@container">
  <View class="flex flex-col @min-[475px]:flex-row">
    <!-- ... -->
  </View>
</View>

I'd imagine rules around here would be close to media-queries. However some complexity comes from need to track parent container size and named instances.

[Brentlok]

Hey, thanks for suggesting this! Container queries in v4 are awesome, and bringing them to Uniwind is a great idea.

Our hands are pretty full right now, so we won't have the bandwidth to tackle this in Q1. Like you pointed out, tracking parent sizes and named containers adds some tricky complexity under the hood, so we need to make sure we plan the implementation carefully.

We've added this to our list for Q2 planning to figure out how we can best make it happen. We'll drop an update here once we have a clearer timeline. Thanks again!