![Advanced Tailwind: Container Queries](https://gratis-creeper.transforms.svdcdn.com/staging/blog/banner_2023-07-28-190954_vhsa.jpg?w=1660&h=1188&auto=compress%2Cformat&fit=crop&dm=1708017435&s=5bba54cc6ffebe4240d9a8b4c059c322)
TailÂwind proÂvides a lot of valÂue for stanÂdardÂizÂing design tokens and stylesheets. I’ve been using it in every web based project for the last year, and being able to share comÂpoÂnents between projects and domains withÂout restrucÂturÂing style sheets is an incredÂiÂble boost to proÂducÂtivÂiÂty. Tailwind’s media queries, more specifÂiÂcalÂly, are one of my favorite feaÂtures. With such ease you can define stanÂdardÂized style behavÂiors for difÂferÂent screen sizes directÂly in the className
props:
<div className="sm:col-2 md:col-4 lg:col-8"/>
TailÂwind proÂvides a list of aliasÂes for these queries, which are by default mapped to stanÂdard screen sizes. We can always extend this to match our own numÂbers, of course.
So where’s the probÂlem? This post isn’t about media queries, but conÂtainÂer queries. I conÂsidÂer conÂtainÂer queries to be an advanced techÂnique for TailÂwind as it involves using pluÂgÂins, and fits a speÂcifÂic use-case. Before I explain what a conÂtainÂer query is, let’s look at the probÂlem we’re tryÂing to solve that media queries cannot.
ConÂsidÂer a webÂsite that has a user-conÂtrolled, resizÂable panÂel which is used for side-by-side views. This is often used for cross-refÂerÂencÂing webÂsites where you can see mulÂtiÂple, comÂpleteÂly difÂferÂent pieces of conÂtent at the same time. I put togethÂer a bare-bones examÂple using NexÂtJs to illusÂtrate this below:
I creÂatÂed the panÂels using the react-resizÂable-panÂels library, and am just disÂplayÂing the default NexÂtJs landÂing comÂpoÂnent in both panels:
The issue is that the default NexÂtJs landÂing page includes media queries to hanÂdle mobile views! Why aren’t they being respectÂed when the panÂels are resized? Why do they look dumb when the panÂels are small? Look at the default code below and spot the media queries. They’re defÂiÂniteÂly there, but nothing’s happening!
This is simÂply because TailÂwind media queries are based on the browsÂer window’s size. They will nevÂer change unless the browsÂer winÂdow is changed. They don’t know anyÂthing about the panÂel sizes. How do we get a media query to monÂiÂtor the size of its parÂent div
, instead of the browsÂer winÂdow? This is where conÂtainÂer queries come in, because this is exactÂly what they’re for.
InstalÂlaÂtion #
ConÂtainÂer queries are a TailÂwind pluÂgÂin, so they need to be installed first by folÂlowÂing these steps:
npm install @tailwindcss/container-queries
- Add this to your
tailwind.config.js
file:plugins: [ require('@tailwindcss/container-queries'), // ... ],
Usage #
EssenÂtialÂly, we mark our media query aliasÂes with a new conÂtainÂer flag @container
, or if you want a unique name in the case of more comÂplex designs, you can write @container/{name}
:
This tells any child comÂpoÂnents that if their media queries are also flagged, they will monÂiÂtor only the parent’s size. See the @lg:flex
flag in the div
? The @
will make the lg:
alias track the @container
.
So with this new tech, we can just do a find-all on media queries in this comÂpoÂnent, and add the @
markÂer. It will begin to look like this:
After runÂning this now, we’ll see that our conÂtent inside the panÂels are now respectÂing the parÂent comÂpoÂnent 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 amazÂing if you have a simÂiÂlar use-case, and makes conÂtainÂer queries incredÂiÂbly easy to impleÂment. The next time you have to deal with resizÂable panÂels, or even just child comÂpoÂnents that need a slightÂly more advanced twist on their styling, take a look at Tailwind’s conÂtainÂer query plugin!
You can check out the live examÂple of conÂtainÂer queries runÂning with the panÂels here: https://advanced-tailwind.vercel.app/
And the source code is here: https://​github​.com/​D​a​v​e​A​l​d​o​n​/​a​d​v​a​n​c​e​d​-​t​a​i​lwind
Looking for more like this?
Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.
![2022 Best and Brightest Winners in West Michigan](https://gratis-creeper.transforms.svdcdn.com/staging/blog/1359274_socialimagebestandbrightest_LinkedIn_042822.jpg?w=696&h=320&q=75&auto=format&fit=crop&dm=1708017374&s=3f14081f8ad2c3406cdb443412a500e8)
2022 Best and Brightest Winners in West Michigan
May 2, 2022The Best and Brightest Companies to Work For® competition identifies and honors organizations that display a commitment to excellence in operations and employee enrichment that lead to increased productivity and financial performance!
Read more![Three principles for creating user-friendly products](https://gratis-creeper.transforms.svdcdn.com/staging/blog/Three-principles.jpg?w=696&h=320&q=75&auto=format&fit=crop&dm=1708017686&s=4b6b726c71c183e97216b75f1ab9e0ec)
Three principles for creating user-friendly products
January 25, 2023Grayson discusses three guiding principles he utilizes when designing user experiences for products.
Read more![Product Strategy](https://gratis-creeper.transforms.svdcdn.com/staging/blog/100_0U0A9231.jpg?w=696&h=320&q=75&auto=format&fit=crop&dm=1708017367&s=d6efaaef71ace3f62fb6b72876f47168)
Product Strategy
November 22, 2022A look at Product Strategy at MichiganLabs. Why we do it, what it is, what it is not, and how we approach it.
Read more