Provide breakpoints according to parent instead of viewport

[rhythmbhiwani]

the breakpoints we currently use sm: md: etc. works with respect to the viewport width which is a very useful feature. But in some cases, width of a particular container is dependent on width of sibling containers which migth change (example, expending a menu sideways). Then if the sibling container width is increased, the main container width gets decreased.

For a better UI design to handle UI based on the width available of the parent container would be much better to decide how to layout elements with respect to the available width of the parent. So we could assign a class to the parent container, and add some breakpoints to child elements which will react to the width of the element with parent class.

I'm not sure if this is possible just with css, or can be integrated in tailwind css, but would love to know more about it.

edit: Found this article on MDN about container query which is somewhat exactly I want but is in experimental stage. But I think it could be achieved using some javascript maybe.

[jenstornell]

It's way too early to implement container queries into Tailwind at this point, in my opinion.

As much as I want the same thing as you, I would still stick to traditional media queries for now.

[rhythmbhiwani]

Can't we have some workaround based on javascript for this behaviour before the browsers officially support this feature like we used the tailwindcss-aspect-ratio as a hack before browsers had native implementation

[jenstornell]

Tailwind is a CSS framework. I never want to see javascript in there.

If you have the skills you can try out a polyfill for it.

https://css-tricks.com/a-new-container-query-polyfill-that-just-works/
https://github.com/GoogleChromeLabs/container-query-polyfill

[rhythmbhiwani]

Thanks, I'll look more to it.

[corywatilo]

Looks like this is fully supported across desktop browsers now! Time to revisit?

[wongjn]

Have a look at the official Tailwind Container Queries plugin

[corywatilo]

Ah missed this, thx!

[SandySY]

I feel very much that this building's answer has helped me.

[Wotsits]

Just in case anyone else is looking for a solution - https://github.com/tailwindlabs/tailwindcss-container-queries

[muehlt]

Just in case anyone else is looking for a solution - https://github.com/tailwindlabs/tailwindcss-container-queries

For future reference: As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required.