Feature request: Responsive utilities based on container width, rather than screen-width.

[samuelandert]

We are currently developing a design system, where we have svelte based web-components, which can be dragged and dropped into different css-grid slots of various css-grid layouts. Is there any way to "re-use" the responsive pre-fixes based on the container-width, rather than the standard full screen width?

[adamwathan]

I wish, what you’re asking for is “container queries” which is probably the most requested CSS feature of all time.

You can simulate them pretty well with a few different JS libraries but not within a CSS framework unfortunately.

[Wulfheart]

cc @samuelandert
https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries

There is a guide on how it can be achieved with css.
Here is a demo of it.

[samuelandert]

@Wulfheart This is quite amazing, thanks Alex!
@adamwathan what do you think, do you see a way to integrate this into tailwind?