Using CSS Container Queries with Tailwind CSS

Container queries are (almost) here! Check out how to use them in Tailwind CSS 3.2.

Watch more videos on my brand new site:

- 0:00 – Intro
- 0:57 – ArticleCard with React props
- 10:15 – The problem with props
- 11:51 – ArticleCard with Container Queries
- 22:05 – Outro

[hhhhhhhhhhhhhhhhhhhhhh]

Absolutely can't wait to see super responsive components with these in TailwindUI and other TailwindCSS "component libraries".

[mmmikem]

Was watching Una's talk at Nextconf and thought I'd brush up on some new tailwind, who else to deliver quality content but uncle Sam!

[dexter-wybo]

+1 for being the first dev channel I’ve noticed that actually just says “braces” instead of “curly braces” (vs brackets or parenthesis) … that’s worth a subscribe 😂

[swyxTV]

so cutting edge Sam! and beautiful demo site

[CraigKaminsky]

Absolutely amazing! Great presentation and super-excited to try container queries out as they're the solution to an issue we have at work! Thanks!

[moonstar_connor]

Awesome explanation and great video production quality, looking great!

[kashnigahbaruda]

Glad I watched this before I started making my site responsive

[Demonnof]

Wow, i wished i learned this 3 months ago, nice!

[HeyNoah]

This is amazing!!! Love the video, and great demo!

[EvertJunior]

This is fantastic! Thank you for the excellent explanation! Can't believe firefox is the one lacking support atm, lets hope it gets wide browser support soon! This changes everything

[jtrenda]

Key takeaway for me is I gotta start using faker when building mockups.

[benazirahmed]

Excellent video! Watched your next.js Conf talk too -enjoyed it a lot. You code like a breeze. Could you make a video on how you use Vim to code faster? I use vim too, but I'm not half as fast as you are.

[_parassolanki]

Container query will change how we used to do responsive design hope soon it will get available in all major browsers.
And also tailwind makes using container query so much easier.

[yash]

Love it. I wanted to ask you something. I love your videos and I know you are React developer but I wanted to get your opinion on Svelte

[greendsnow]

More a brief moment,
I thought it was him
that was coming
as a new feature to the CSS.

[Binuralka]

hi sam! thanks for the video, what tool do you use to order classes within a ?

[Aaron-qyvb]

Hi Sam. It would be great if you could make a video how you never uses the mouse.
Even for calculation: 14:56 . this is really impressive.

[SogMosee]

Would you please also show your key presses on like bottom left hand side with something like keycastr so we can also learn vim variously through you? It would mean the world

[kamill]

Hi Sam, I love your channel. I have one question, sometimes when you describe specific layout component you've used a selection tool, it's very similar to capture a portion of screen but you can easy manipulate the selection. What is this tool ?

[atheerapeter]

for conditionally rendering class names there’s an npm package called classNames it makes it super easy