Complete CSS Flexbox Tutorial using Tailwind CSS

This video is a complete guide to all the available flexbox utility classes in Tailwind CSS. Each one of them is explained practically with simple examples. If you already know the basics of CSS flexbox, that's great. But even if you don't know much, this will help you understand the concepts better.
Tailwind play links:
play.tailwindc...
play.tailwindc...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#tailwind #tailwindcss #flex

[@allen86333]

I'm a backend developer and I hated writing lots of css so I chose bootstrap but Bootstrap doesn't do everything It still needed help of css & js , but tailwind saved me with amazing abilities that it provides. No more css , write everything on the classes and also customization is pretty simple and powerful.
Well, for me the main reason for watching this is video is not to memorize but to get the idea of what and how tailwindcss flex works and the video you provided explains everything
Thank You Ma'm.
Waiting for Tailwind 4 Stable Release and your tutorials.

[@Thirus]

Thank you for the detailed comment! Yes, we all love Tailwind for the same reasons.

[@mishenthakshana3407]

Hello my teacher after going to learn tailwindcss from you. You have helped me before 2 years ago with a silly php loop , remember me ? thankyou so much

[@Thirus]

Hi Mishen, yes I remember that. But has it been two years already??

[@adarshchakraborty]

I don't know how many times i will come back here, I always keep forgetting and this video helps me out 😅

[@Thirus]

Yuhooo! So happy it helps

[@jpwelch923]

Tailwind needs more tutorials like this. Thank you!!

[@Thirus]

You’re welcome 😊

[@s.h.i.e.l.d..]

The examples are better than millions of words. Carry on sister.

[@Thirus]

Thank you! 😊

[@ankxsh]

THE SEARCH ENDS HERE. EARNED A SUB. GREAT JOB!

[@Thirus]

Awesome! Thank you

[@user-nb1fn5xf5s]

This was much needed, thankyou for helping me out here!

[@Thirus]

You’re welcome :)

[@akibkhan7308]

I loved ur toturials,totally the best on internet, I gotta say learning front end with animation is the best way to learn

[@Thirus]

Your comment made my day! Thank you 😊

[@marvii13]

Thant's the best tailwind tutorial I've ever seen ..Really Thank u 🥰

[@Thirus]

You’re welcome 😊

[@eliud_karuga]

You made it so easy to understand especially for beginners

[@Thirus]

Thank you 😊

[@atharvashah1362]

Exactly what I needed. High quality tutorials. Thanks, this made my day.

[@Thirus]

Great! So glad it helped :)

[@harmitchhabra989]

This is absolute gold! Thank you so much Shruti ❤️

[@Thirus]

You’re welcome 😊

[@donnfelkeryt]

Absolutely amazing video. Great job.

[@Thirus]

Thank you ☺️

[@veeramanikandans4069]

Awsome tutorial for tailwind beginners like me...
Thank you very much 🤝

[@Thirus]

I’m glad it helped 😊 You’re welcome

[@sirajcheppu]

Very informative even for beginners

[@Thirus]

Thank you!

[@yousefhosny8864]

Thank you soo much, can you make a similar video on css grid and how to know when to use grid and when to use flexbox

[@Thirus]

Yes, the grid tutorial is in the making

[@billionairepodcast]

This is gold. Thank you

[@Thirus]

You’re welcome :)

[@kevincearns9739]

Fantastic tutorial....very well layed out and explained.

[@Thirus]

Thank you 😊

[@nimda2sdfsdfsd]

items-end and items-baseline gives the same result, try removing the bg and see. When to use items-baseline and when to use items-end ?

[@AlbertC64]

This is beautiful, thank you!

[@Thirus]

You’re welcome!

[@mudassirkhan5036]

Awesome 😎

[@Thirus]

Thank you!

[@sutikshanmishra2061]

flex-basis not working showing invalid property in console

[@JT-gn4vo]

Thanks for this video :)

[@Thirus]

You’re welcome 😊

[@kieran5746]

Awesome, thanks very much!

[@Thirus]

You’re welcome 😊

[@boyinapavan7926]

We want a video on javascript from scratch. Can you provide?

[@Thirus]

Sorry, I’m not much into Javascript

[@LordFullStack]

Awesome thanks

[@Thirus]

You’re welcome 😊

[@jerome_ee6522]

Thank you. You're a talking documentation. I was so lazy to read it!

[@Thirus]

Wow! So happy to know that!!

[@JohnWickXD]

Thank u so much😁

[@Thirus]

You’re welcome!

[@aaomms7986]

Thank !!

[@SusanthCom]

Could you please come up with creating themes using tailwind CSS. Thanks in advance 👍👍

[@Thirus]

Do you mean Wordpress themes? Or just website themes?

[@SusanthCom]

@@Thirus website themes using tailwind configurations. Changing few theme should change the colour and some looks, like rounded buttons vs rectangle ones. In short changing theme should bring great change in look but no content change. Few examples would be markdown themes and website colour themes

[@Thirus]

Will need to do some research

[@SusanthCom]

dev.to/ohitslaurence/creating-dynamic-themes-with-react-tailwindcss-59cl
... Though I personally prefer Vue over React, the strategy could be used

[@rangabharath4253]

awesome

[@Thirus]

Thank you 😊

[@Mental_Redemption]

Can't thank you enough..
best tailwind tutorials for a beginner.
Take lots of love from a little brother..

[@Thirus]

Thank you 😊

[@aeronwolfe7072]

FINALLY..... a video that just ... SHOWS ME HOW TO DO IT.... and doesn't TALK for 30 minutes first. Thank you. You've earned my sub.

[@Thirus]

Glad you loved it :)

[@lars6280]

This video provides the most comprehensive explanation of flexbox I've come across, surpassing even commercial training materials.

[@Thirus]

Thanks a lot! 😊

[@akterh0sain]

thankyou , when i watch your video i feel like i m in class 5 and my primary teacher teaching me . so much easy to understand your video . please keep it up .you are the only woman i follow for coding . 💖💖💖💖💖💖

[@rajbongshi2002]

I can't say by words how to appreciate you...because, today I have known that what a big misconcept I had about Flexbox property. Now it is all cleared, thank you mam
CSS and JavaScript is the most common confusing language i have ever found...😇😇😇

[@Thirus]

Very happy to hear that you have better clarity now :)

[@gauravkoshyari1828]

best video on YT i have watched about flexbox .

[@Thirus]

Thanks a lot!

[@thirdreplicator]

+100 thumbs up.

[@Thirus]

Thank you!

[@jerome_ee6522]

i really never understood the concept of justify content and align items until I used flutter.
for justify content, it's the main axis.
for the align items, its the cross axis.
Oh man feels like I missed a lot because this is the only time I grasp the concept.

[@tarekmagdy5775]

I never comment on any video like rarely but this one wow
it was sooo good so simple so informative didnt get bored at all
understood most of the conecpts
u just earned another subscriper 😃

[@Thirus]

Thank you for the lovely comment Tarek 😊

[@keerthikitijaya-wardena6777]

Excellent Tutorial!. Thanks a lot! I'm watching your vids from Germany. Keep up your great work.

[@Thirus]

Thank you very much :)

[@williamsteinkedemello6916]

Thank you so much for your lesson! I'm still a little stuck with my first task in my job, does someone know how to make the styling/structure for desktop + mobile using Tailwind CSS? For example, there's a first desktop component with 2 pictures displayed horizontally and a second mobile component displayed vertically on the screen.

[@Thirus]

“flex flex-col md:flex-row”

[@boyinapavan7926]

The way you teach is just awesome 👍.by this video i got cleared many of doubts and thank you 🙏.

[@Thirus]

Very happy to know that 😊

[@lallyalallya9507]

OMG, Finally all doubt clear, thank you so much, pls don't stop making video. Can you make videos on react

[@Thirus]

Thank you 😊 React is not my stack, but I might start looking into it soon

[@fixthebug2060]

underrated channel

[@manujanethwidu]

This is really helpful. Simply explained. All areas coverd. Thanks.

[@Thirus]

You’re welcome :)

[@rahavareddy5510]

The way ur of Explaning things are better then many tech TH-camrs
Thank you mam....

[@Thirus]

That’s a huge compliment! Thank you Rahava 😊

[@ShaikAfshin]

Excellent Demonstration Madam, Love you !

[@Thirus]

Thank you!

[@asfnobambu]

Glad to listen a female voice, to change. Nice content also...

[@Thirus]

Thanks! I wish to hear more female voices in the future :)

[@greendsnow]

I wanted to hit the like button multiple times, but it was already pressed... 😅

[@Thirus]

Ha ha thanks!

[@fluttterdev1k]

thanks it's is so good and detailed ,please just keep going teacher

[@Thirus]

Sure, thank you!

[@raymondloranger941]

Beautiful tutorial, Thirus! I am learning the Phoenix framework which seems to now lean towards Tailwind but you need guidance to use it properly. This tutorial is splendid in that role. Many thanks!

[@Thirus]

Very glad to hear that :)

[@xxoooOFxx]

Very well explained! Thank you, sis~!

[@Thirus]

You’re welcome :)

[@CTILET]

Like and subscribe! I try to find something like this

[@Thirus]

That’s great!

[@eekrain]

when i look that items-baseline, i instantly hooked to ur vids

[@Thirus]

That’s nice to know 😊

[@chandrashekargaajula2131]

That was done right with surgical precision. Solved multiple problems I had.

[@Thirus]

Awesome!! 😊

[@AnnaMcDougall]

Will definitely come back to this once I start on Tailwind! Thanks Shruti!

[@Thirus]

Yay! Will remind you 😀

[@techsuvara]

Why not just use w-1/3 at 30:30?

[@learnfronteasy9642]

hi I'm learning Tailwind in Persian language

[@Thirus]

That’s great

[@saeediqbal_DEV]

Hello Shruti, why don't you make more videos on tailwind and it's other libraries?

[@Thirus]

Got too occupied with things. Planning to focus on TH-cam again in 2024. You have any specific suggestions?

[@saeediqbal_DEV]

your way of teaching is very impressive i have learned a lot from your youtube videos and ebook. I would request you kindly make some more content on tailwind, it's other ui component lib etc. Love from PAK. @@Thirus

[@anilshrestha1272]

this is detailed .thank you

[@Thirus]

You’re welcome 😊

[@jorgeluizplautz6890]

Thanks for these information.

[@Thirus]

You’re welcome

[@Vivek-hv2rn]

Very detail explain maam thank u

[@Thirus]

You’re welcome :)

[@oluwaseunladeinde410]

Thank you Thirus!

[@Thirus]

You’re welcome

[@SyedIftikharUlIslam]

The exact content that I wanted...

[@Thirus]

Amazing!

[@hamzamohd.zubair1709]

Best tutorials on tailwind

[@Thirus]

Thank you :)

[@Learningcenter46]

I watched many videos including @codeWithHarry but your way of teaching iss very impressive thanks for such a quality content

[@Thirus]

Thank you 🙏😊

[@shamimsarker3687]

Really, Impressive

[@Thirus]

Thank you!

[@funnyvideoscollection8820]

Thank you. It was an eye opener & hands down best tutorial. 🙏 I can actually stop doing hit & try on my code.😅 @thirus … is there an update coming?

[@Thirus]

I’m very glad to know this!
By “update”, you mean, for a newer version of Tailwind CSS? Nothing much has changed with respect to flexbox utility classes in the newer versions.

[@codelikealpha]

Thank you very much

[@Thirus]

You’re welcome!

[@muhammadahsan9473]

very very great mam

[@Thirus]

Thank you!

[@hananibrahim9565]

Great and clear explantion of Tailwind CSS

[@Thirus]

Thank you!

[@hananibrahim9565]

You're welcome

[@andikusnadi1979]

COOL
, thank you

[@Thirus]

You’re welcome

[@hiajayy]

Thank you ma'am.

[@Thirus]

You’re welcome! 😊

[@sreekar_s]

Happy Women's day, Shruti! We need more people like you on this platform for encouraging and educating people across all walks of life. Thanks a lot for doing this. This is an awesome video. Loved it!
One small request from my end. Since most of the people work/attend classes in the daytime, most ppl watch videos in the night time. It would be great if you could use dark mode/theme wherever possible. Thank you once again:)

[@Thirus]

Thank you so much Srikar!
You’re right. Will keep this on mind. Thank you for the detailed feedback 😊

[@sreekar_s]

@@Thirus welcome 🙏

[@basudevbharatbhushan4873]

THANKYOU

[@Thirus]

You’re welcome!

[@abelabbesnabi]

Good job!

[@Thirus]

Thank you!

[@edwardsernas5089]

Good video!

[@Thirus]

Thank you!

[@quazisamihatasnim792]

Thank You

[@Thirus]

Welcome!

[@ahmedabbas3981]

Thanks

[@Thirus]

You’re welcome!

[@hbela1000]

outstanding tuto !

[@Thirus]

Thank you!

[@NuktaeAghaz]

why no more videos . Thanks for this amazing video

[@Thirus]

Hands are full with other works. Hope to get back to TH-cam soon

[@NuktaeAghaz]

@@Thirus do we need to remind all classes or just to start hands on projects to gain full control of tailwind? Please

[@NuktaeAghaz]

@@Thirus 🙏 👍

[@Thirus]

Simple hands on project is the best way to learn. If you know very basic CSS, it’s good

[@hasindukoshitha8398]

Thanks You for this amazing content. This helps me lot to understand the concept behind flexbox.
I found out that flex-basis in tailwind CSS is available now as
like=> basis-3/4

[@Thirus]

Yes, it’s now available. Glad you liked the video :)

[@amakhija1]

thanks for a great explanation! I feel I finally understand flex, thanks for the clarification ... big sub!

[@Thirus]

That’s awesome! You’re welcome 😊

[@saicharan1000]

Very nicely explained. Thank you for the tutorial on Tailwind.

[@Thirus]

You’re welcome :)

[@oomusou]

Great tutorial, hope to see Complete CSS Grid Tutorial using Tailwind CSS soon.

[@Thirus]

Working on it. Will upload that in a week

[@tanveerbhutta8812]

Hello mam
yee porblulm a rhi h
The `content` option in your Tailwind CSS configuration is missing or empty.
tailwind css showing warnings about generated css file missing styles.
tailwind classes bhi use ki .
npx tailwindcss init b hi creat kia h.
tailwind.config.js bhi creat kia h . phit bhi work ni ho rha please es ka reply zaror dyna kitne dino see koshish kr rha ho porblum solve he ni ho rhi bar bar new files bnata ho phir bi

[@Thirus]

This video is for the older version. Check my latest video for installation and setup:
th-cam.com/video/h9Zun41-Ozc/w-d-xo.html

[@robertto1ify]

Nice!! Will be there also the same kind of tutorial for css grid on Tailwind?❤

[@Thirus]

Coming soon, in about a week. Subscribe to get notified 😊

[@David-qr2dk]

Hello @Thirus, this is an excellent content and it helped me for flex-1 :D
I will check if you have one about Tailwind Grid, I will be curious to see the difference.

[@Thirus]

Thank you David. Yes, I do have a video for Grid too. Also, do you know I have an eBook with 70+ real world examples using flexbox and grid?
Here’s the link if you wish to check it out: shrutibalasa.gumroad.com/l/css-flex-and-grid

[@David-qr2dk]

@@Thirus I’ll the video and the eBook, thank you :)

[@kaunteyasuryawanshi]

Thanks for making this tutorial. Was quite helpful.

[@Thirus]

You’re welcome! 😊

[@kunal-ko]

at 35:34 she said that you can't use gap with flex which is untrue you can use it.

[@Thirus]

The browser support for “gap” with flexbox wasn’t good at the time of creating this video. Now it’s good. Yes, you can use it.

[@tanzimibthesam5861]

Awesome btw is space-x similar to gap in css grid.

[@Thirus]

It works similarly. If you dig deeper, Tailwind just adds a margin left to all the child items except for the first one. So space-x won’t work well when the items wrap

[@saabirmohamed636]

excellent tutorials glad i found this channel

[@Thirus]

Glad you enjoy it! :)

[@kieran2347]

Amazing Video, Shruti! Thank you!

[@Thirus]

You’re welcome 😊

[@LastVoyage]

Your explanations are sooo good

[@Thirus]

Thank you 😊

[@neerajkandpal1506]

thanks alot great content

[@Thirus]

You’re welcome :)

[@RiazKhan-uv9wx]

Really well explained
thank you

[@Thirus]

You’re welcome 😊

[@cryptoboy1461]

Great content! keep up the good work 👍🏼

[@Thirus]

Thank you :)

[@pushpakchhajed8845]

Amazing video!🔥

[@Thirus]

Thank you Pushpak 😊

[@ravindrana2826]

test

[@Thirus]

true