-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Container queries #1563
Comments
This has so many use cases, mainly themes (dark mode). |
Based on my understanding of how Tailwind works I'm not sure this is possible. Breaks points or "container" classes like Although, maybe you could make some sort of webpack plugin/loader for your framework of choice (vue/react) etc to process those tags. But I'm sure that would probably be out of scope of Tailwind core anyway. |
Aren't the breakpoint classes generated from the config json file? You can configure your breakpoints and media queries in that file so in theory it would be great to be able to configure what container queries you want in there too, and only have those compiled into the resulting css. the resulting css classes would be prefixed with the container class:
|
Not planning to explore this any time soon, I would recommend just managing the class list directly if you are going to use JavaScript to set the parent class anyways. |
@adamwathan one use case we've recently encountered is the following: we're developing custom web components to be used and embedded as widgets on arbitrary websites. As we do not always know where and how the widgets will be used, we're currently using ResizeObserver to observe the widget container's width and apply a global class depending on the current size instead of the current screen size, which allows us to be more flexible and adaptable. Currently we're not using Tailwind CSS yet due to the above troubles we face. Could it be an option for Tailwind to have a config option to switch from media queries to a class-based approach? Let's say for example on the parent class you set Other than that, is there any other approach to handle such use cases? |
@adamwathan now that Dark Mode is here, could we have this feature ? |
Sorry for the noise.
|
thanks you ! i love it :-) |
@Angelinsky7 Your solution works, thanks. |
We build interfaces in and from components today. The same component could look very different depending on the context - mainly how wide the parent container is? It would be really awesome if Tailwind supported Container Queries. Some ideas here: |
You can actually do some kinds of "container queries" using a super cool CSS hack...no javascript/static code required. https://heydonworks.com/article/the-flexbox-holy-albatross/ If you would simply generate the flex-base root values used in the calc you could have a |
Yes, it's nice for some cases, but I cannot fully control every css attribute of child elements based on the parent width. |
Media queries can be enabled by setting a flag in the new chrome: https://css-tricks.com/say-hello-to-css-container-queries/ |
I accomplish this with a custom PostCSS plugin that makes rules like ._sm ._sm\:mt-10 {
margin-top: 2.5rem;
} for every (un-purged) responsive Tailwind rule like @media (min-width: 640px) {
.sm\:mt-10 {
margin-top: 2.5rem;
}
} Adds some CSS bloat, but it's worth it for me. Then I have a client-side script that converts classes like This works pretty well on the whole, at least for my purposes (making full-width components look okay when put against a sidebar). A nice benefit is that I can just use normal responsive Tailwind classes in my code. If the component is wrapped in one of those containers with a |
@Angelinsky7, I don't think the plugin above will handle this correct:
However, I think the following plugin solves this:
|
The proposed plugin also creates useless responsive variants, e.g. for |
I believe that using |
Great idea, but if I hide the classes from tailwind using the attribute selector trick then the responsive variant generation errors out with:
|
Adding my two cents to this thread. Chrome Labs now has a polyfill. Maybe someone can write a tailwind plugin that uses this polyfill. Because we want container queries today! |
just started playing with this and its looking promising for anyone else landing here looking. https://github.com/dgknca/tailwindcss-container-query |
@basejump I'm looking at that as well. How has your experience been? Thank you! |
@adamwathan Hi, chrome 105 is released with container query, will look this again ? |
Safari 16 launched with support for this today. Super excited to see it's almost ready in Chrome as well. This must be one of, if not the the biggest, CSS features to come in many years. |
FWIW, I've been using tailwindcss-container-query library and it works great. It uses container-query-polyfill library. Native tailwind support would be great but also not a priority imo as long as these other libraries work. The one thing - I have been noticing some memory / hanging issues with a large-ish scatterplot chart along side 5 other charts and I dont know if that is just from recharts or because of the polyfil stuff. Haven't traced it yet, but that's in my field. |
Deriving from @fratzinger 's link, any news on when this feature will be fully integrated into tailwind? |
Hi,
I'm not sure if it's possible already so please forgive if it is.
I'll like to implement container queries that are not based on media queries. So in my thinking i'd like to be able specify custom breakpoints (which i know is available) but based on a parent container class rather than a media query. So for example...
I would apply the "thin" class to the container via Javascript.
The text was updated successfully, but these errors were encountered: