Advanced Tailwind: Container QueriesJuly 28, 2023
Tailwind provides a lot of value for standardizing design tokens and stylesheets. I’ve been using it in every web based project for the last year, and being able to share components between projects and domains without restructuring style sheets is an incredible boost to productivity. Tailwind’s media queries, more specifically, are one of my favorite features. With such ease you can define standardized style behaviors for different screen sizes directly in the
<div className="sm:col-2 md:col-4 lg:col-8"/>
Tailwind provides a list of aliases for these queries, which are by default mapped to standard screen sizes. We can always extend this to match our own numbers, of course.
So where’s the problem? This post isn’t about media queries, but container queries. I consider container queries to be an advanced technique for Tailwind as it involves using plugins, and fits a specific use-case. Before I explain what a container query is, let’s look at the problem we’re trying to solve that media queries cannot.
Consider a website that has a user-controlled, resizable panel which is used for side-by-side views. This is often used for cross-referencing websites where you can see multiple, completely different pieces of content at the same time. I put together a bare-bones example using NextJs to illustrate this below:
I created the panels using the react-resizable-panels library, and am just displaying the default NextJs landing component in both panels:
The issue is that the default NextJs landing page includes media queries to handle mobile views! Why aren’t they being respected when the panels are resized? Why do they look dumb when the panels are small? Look at the default code below and spot the media queries. They’re definitely there, but nothing’s happening!
This is simply because Tailwind media queries are based on the browser window’s size. They will never change unless the browser window is changed. They don’t know anything about the panel sizes. How do we get a media query to monitor the size of its parent
div, instead of the browser window? This is where container queries come in, because this is exactly what they’re for.
Container queries are a Tailwind plugin, so they need to be installed first by following these steps:
npm install @tailwindcss/container-queries
- Add this to your
plugins: [ require('@tailwindcss/container-queries'), // ... ],
Essentially, we mark our media query aliases with a new container flag
@container, or if you want a unique name in the case of more complex designs, you can write
This tells any child components that if their media queries are also flagged, they will monitor only the parent’s size. See the
@lg:flex flag in the
@ will make the
lg: alias track the
So with this new tech, we can just do a find-all on media queries in this component, and add the
@ marker. It will begin to look like this:
After running this now, we’ll see that our content inside the panels are now respecting the parent component sizes, and we didn’t have to rewrite our media queries at all! Aside from just adding a
@ to each one.
I think this is amazing if you have a similar use-case, and makes container queries incredibly easy to implement. The next time you have to deal with resizable panels, or even just child components that need a slightly more advanced twist on their styling, take a look at Tailwind’s container query plugin!
You can check out the live example of container queries running with the panels here: https://advanced-tailwind.vercel.app/
And the source code is here: https://github.com/DaveAldon/advanced-tailwind
Stay in the loop with our latest content!
Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.
To RFP or not to RFP?January 19, 2024
Selecting the right digital product partner is not just about ticking boxes in a request for proposal (RFP). It’s more important to engage in a meaningful discovery process to find a collaborator who can turn your vision into a successful digital reality. Here are three things to watch out for as you search for the perfect digital collaborator.Read more
Information Experience can make or break a productJanuary 4, 2023
Kai discusses how writing impacts user experience, providing an overview of the types of writing that are involved in product development and how to approach it from a very high level.Read more