Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support of max-width container queries #20

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

pbabcsany
Copy link

This PR implements support of max-width container queries using @max or atMax variants.

There are two variants because combination of arbitrary container sizes and named containers are not supported by the current default extractor. To support that case the atMax variant has been introduced (although the @max variant would be syntactically better and more aligned with the rest of the module).

README.md contains the usage including the edge case which is only supported by atMax. Unit tests has been added as well.

Thanks guys, you are really doing a good job with Tailwind CSS.

@ConnorMoodyDev
Copy link

Great addition! Not sure why this hasn't been approved yet!

Tested it and works great, even when adding multiple container queries for a min & max effect.

This simple addition has cleaned up my code immensely.

auction-card @[45rem]/auctions:@max-4xl/auctions:auction-card--wide

Tested it with arbitray values, as well as with base container queries

@ibilux
Copy link

ibilux commented Oct 5, 2023

Why this hasn't been approved yet ?!

@ConnorMoodyDev
Copy link

@adamwathan not sure if it's acceptable practice to tag the core team on PRs, but I feel like this may have gone unnoticed and would be a great addition to the plug-in

@pedroSoaresll
Copy link

pedroSoaresll commented Dec 22, 2023

This would help a lot. Congrats on your implementation! 👏🏽 @pbabcsany

Without this feature it is still possible to achieve the needs of the breakpoint, we need to "inverse the logic".

@myieye
Copy link

myieye commented Feb 19, 2024

@adamwathan Can we get this merged in? Without this, hiding columns as a table gets smaller requires somewhat ridiculous classes.

@hugo-cardoso
Copy link

Any updates on this?

@ConnorMoodyDev
Copy link

Any updates on this?

It is included in the new version of tailwind I believe so this repo will officially be abandoned in favor of the main tailwind repo I believe. I could have read that wrong though, but I'm pretty sure!

@florianjuengermann
Copy link

@ConnorMoodyDev In which tailwind version will this be included? I don't see it yet.

@ibilux
Copy link

ibilux commented May 25, 2024

@florianjuengermann I think @ConnorMoodyDev is referring to container, but it's not the same as @tailwindcss/container-queries.

@ConnorMoodyDev
Copy link

@ConnorMoodyDev In which tailwind version will this be included? I don't see it yet.

https://tailwindcss.com/blog/tailwindcss-v4-alpha

This will be included in V4

Container queries in core — we’ve added support for container queries directly to core, with new @Min-* and @max-* variants to support container query ranges.

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

Successfully merging this pull request may close these issues.

7 participants