6 New Tailwind Techniques in 8 minutes

Highlights from my live-coding talk at Tailwind Connect 2023.
🔗 LINKS
My Tailwind course: buildui.com/courses/tailwind-...
Watch the entire talk: • Tailwind Connect 2023 ...
🕐 TIMESTAMPS
0:00 - Intro
0:09 - Text accent
0:39 - Responsive typography
1:35 - Text balance
2:27 - :has() selector
4:26 - Container queries
7:06 - Masonry layout
8:17 - Outro

[@samselikoff]

Hey all - just reposted this, had some renegade audio at around the 5-minute mark and wanted to fix it! Sorry for the mixup :)

[@aspirin02]

is all this css available for regular browsers nowadays or is this still a preview of things to come? i'm specially interested in the last one - masonry grid

[@polyander]

@@aspirin02 me too! also interested in the last one, but couldn't get it to work so far!

[@OneBrighDay]

I remember seeing this during the conference. I’m glad you made it a separate video. We need a tailwind class from you, please.

[@samselikoff]

I actually released a full course where we build a Discord clone from scratch a few months ago! buildui.com/courses/tailwind-mastery

[@DEV_XO]

Amazing one Sam! We love your Tailwind / Radix / Framer content! Keep it up! ❤

[@bitflorist]

Love your content!

[@bullettime2808]

that was seriously mind blowing

[@youssefbenlemlih]

Awesome video! Really like the new format!

[@ikechukwucharles2314]

I love the masonry layout, so nice

[@IkraamDev]

Brilliant. Thank you.

[@serifcolakel823]

thank you btw love your content🙏

[@keshavakumar9828]

Wow this is just amazing. Love the features plus your videos are cool

[@erikplachta]

🎉 thank you for this!

[@sivaganesh4489]

amazing content

[@rockNbrain]

awesome job dude!!! tks

[@agustinpa7374]

Thanks!! very cool

[@radezzientertainment501]

nice! will play around with some of these features today!

[@nastyideas]

great treatment!

[@edgarasben]

Great tips!

[@jtjt8777]

pure magic. They are all useful to tricks. I will use the responsive typography immediately.

[@wahliner]

And just like that, a handful of my most painful css woes have been fixed. Thanks!

[@RegalWK]

Amazing!

[@omarjab]

i love this kind of videos, please do more 🖤

[@sarojregmi200]

It's amazing.

[@hqasmei]

Brilliant Thanks Sam! Will definitely be using these.

[@korigamik]

How did you make the vscode completion window to be like that?

[@official.mhm13]

Awesome

[@dkras]

Thanks bro! You have a gift

[@ruhulamin1741]

excellent!

[@0xAndy]

group-has definitely blew my mind.

[@alexg7282]

Thx

[@timekouka]

loooove it

[@dansheetz4285]

The kid is doing it live. Nice work Sam!

[@AliAwwad]

Text-balance fantastic one

[@alexakten]

damn i was JUST looking for ways to make the masonry effect and then this video pops up

[@HenryBabbage]

🔥

[@julianavar3836]

Thats some insane shit

[@avivshvitzky2459]

you're insane

[@Marcus-Lim]

Wait masonry is a tailwind class! 🔥

[@johnzambrano7665]

Thanks Sam! Can we use all of these now in tailwind -- or do we have to wait for browser support? I'm talking about text-balance and masonry

[@atemrandyasong5710]

Text balance is already supported in most major browsers, but masonry still has a way to go as only Firefox has support for it which the user has to custom enable to get it working

[@waqasabi]

​@@atemrandyasong5710 Are you sure? The tailwind docs does not have it yet, looks like it might just be in the insider version

[@rand0mtv660]

@@atemrandyasong5710 text balance is supported in Chrome and is not supported in Safari or Firefox, so I wouldn't say it's "supported in most major browsers".

[@shafu_xyz]

Great! does tw container plugin provide fallback support where its not supported?

[@zdmgy3778]

Thanks Sam! Do you have any plans to release the shadcn-ui course on buildUI?

[@ikechukwucharles2314]

Now I know. You are the CSS God cause wtf

[@whoman7930]

How are you able to work with "has() selector", tailwind doesn't seems to have a support for that yet.

[@bitflorist]

I am looking, if a high dynamic multibranded design system makes sense to implement in tailwind

[@Lucas-gt8en]

Yes. If you want to go really deep you can override any and all default classes with your own but that’s overkill for most use cases imho

[@tech3425]

Every time I see a Sam Selikoff vid, I level up

[@1off271]

great video, thanks! p.s. 720p video in 2023, ohhh.

[@es20x]

When we can use these? Like has-,text balance..

[@tech3425]

Looks like the masonry isn't really supported in any browser. Would have been nice to get a heads up on that.

[@ferooref7614]

Am I missing something ? Does tailwind already come with "text-balance" or "grid-row-[masonry]" ??? ... I cannot find anything regarding this new classes.

[@_Yolandi]

Why you don't have a million follower is beyond me.

[@emmanuel_medina_garcia]

text-balance class is not mention in current documentation.

[@sontiyo7113]

0:35 sounds cool until u realize u cant change the actual checkmark color so u turn the accent to something dark and realize ur stuck with dark bg and the default checkmark color. Ofc this didnt matter with the lime example haha

[@thatsenoughdixit]

That last masonry option would be perfect for the image grid I'm building for images which keeps their aspect ratio 😄

[@shriprasanna3918]

Deleted ??

[@samselikoff]

Yeah I had some bad audio so I re-uploaded it

[@dothex]

@@samselikoff I thought that was you making your tagline known... "And there you have it!' XD

[@ruhulamin1741]

It'd be far better if you would be a little bit more energized while you show these features. It goes a long way to show that you guys are excited about these features.

[@polyander]

disagree, i like that he is not hyping things up too much. i think for teaching his energy is really great.

[@yoggg932]

Hey Sam. You're not 15 years old. Stop wearing a hat like this, it's a bit ridiculous. Love