Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Container Queries support #395

dlebedynskyi started this conversation in Ideas
Discussion options

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.

You must be logged in to vote

Replies: 1 comment 2 replies

Comment options

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!

You must be logged in to vote
2 replies
Comment options

Has there been any progress on the support for this feature?

Comment options

We haven't touch this one yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Ideas
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /