Container media query support #4075
Replies: 1 comment 1 reply
-
I made a Tailwind Play showing how it could be done https://play.tailwindcss.com/ksMRKqWJBs <div class="flex items-center justify-center h-screen bg-gray-300">
<div class="w-1/2 layout-inline-size overflow-auto" style="resize:horizontal">
<div class="bg-white border-4 p-4 border-gray-900 parent-sm:border-red-900 parent-md:border-blue-900">
Resize me to see the border-color change
</div>
</div>
</div> /* prototype css */
.layout-inline-size {
contain: layout inline-size;
}
@container (min-width:640px) {
.parent-sm\:border-red-900 {
@apply border-red-900;
}
}
@container (min-width:768px) {
.parent-md\:border-blue-900 {
@apply border-blue-900;
}
} We would need a utility for the contain property too, in order to "enable" container queries, and then the breakpoints could be defined for both screens and containers in the config. The arbitrary value support could be useful for arbitrary breakpoints like I'm not sure that And would it be necessary to support vertical queries too? Then we would need |
Beta Was this translation helpful? Give feedback.
-
Container media queries are finally landing in Chrome Canary: https://ishadeed.com/article/say-hello-to-css-container-queries/
Tailwind could support them with something like:
Another good idea would be to do
Or something like that, because parent container queries might be more detailed than screen ones (and they will also be smaller than the minimum screen breakpoint a lot of the time). Also, container-xl could be used instead of parent, whatever seems more readable.
Beta Was this translation helpful? Give feedback.
All reactions