Complete CSS Flexbox Tutorial using Tailwind CSS

Поділитися
Вставка
  • Опубліковано 6 січ 2025

КОМЕНТАРІ • 209

  • @adarshchakraborty
    @adarshchakraborty 3 роки тому +17

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

    • @Thirus
      @Thirus  3 роки тому +3

      Yuhooo! So happy it helps

  • @lars6280
    @lars6280 9 місяців тому +5

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

    • @Thirus
      @Thirus  9 місяців тому

      Thanks a lot! 😊

  • @aeronwolfe7072
    @aeronwolfe7072 Рік тому +6

    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
      @Thirus  Рік тому

      Glad you loved it :)

  • @allen86333
    @allen86333 9 місяців тому +4

    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
      @Thirus  9 місяців тому

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

  • @gauravkoshyari1828
    @gauravkoshyari1828 Рік тому +3

    best video on YT i have watched about flexbox .

  • @Mental_Redemption
    @Mental_Redemption 2 роки тому +5

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

    • @Thirus
      @Thirus  2 роки тому

      Thank you 😊

  • @mishenthakshana3407
    @mishenthakshana3407 2 роки тому +3

    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
      @Thirus  2 роки тому +1

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

  • @akterh0sain
    @akterh0sain 2 роки тому +5

    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 . 💖💖💖💖💖💖

  • @jpwelch923
    @jpwelch923 2 роки тому +7

    Tailwind needs more tutorials like this. Thank you!!

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome 😊

  • @conceptresearch2002
    @conceptresearch2002 Рік тому +3

    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
      @Thirus  Рік тому +2

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

  • @rahavareddy5510
    @rahavareddy5510 3 роки тому +2

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

    • @Thirus
      @Thirus  3 роки тому +1

      That’s a huge compliment! Thank you Rahava 😊

  • @s.h.i.e.l.d..
    @s.h.i.e.l.d.. Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

      Thank you! 😊

  • @tarekmagdy5775
    @tarekmagdy5775 2 роки тому +2

    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
      @Thirus  2 роки тому

      Thank you for the lovely comment Tarek 😊

  • @akibkhan7308
    @akibkhan7308 2 роки тому +1

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

    • @Thirus
      @Thirus  2 роки тому

      Your comment made my day! Thank you 😊

  • @manujanethwidu
    @manujanethwidu Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

      You’re welcome :)

  • @boyinapavan7926
    @boyinapavan7926 10 місяців тому +1

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

    • @Thirus
      @Thirus  10 місяців тому

      Very happy to know that 😊

  • @marvii13
    @marvii13 10 місяців тому +1

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

    • @Thirus
      @Thirus  10 місяців тому +1

      You’re welcome 😊

  • @eekrain
    @eekrain Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

      That’s nice to know 😊

  • @user-nb1fn5xf5s
    @user-nb1fn5xf5s 11 місяців тому +2

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

    • @Thirus
      @Thirus  11 місяців тому

      You’re welcome :)

  • @chandrashekargaajula2131
    @chandrashekargaajula2131 3 роки тому +2

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

    • @Thirus
      @Thirus  3 роки тому

      Awesome!! 😊

  • @ankxsh
    @ankxsh 11 місяців тому +1

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

    • @Thirus
      @Thirus  11 місяців тому

      Awesome! Thank you

  • @jerome_ee6522
    @jerome_ee6522 3 роки тому +2

    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.

  • @harmitchhabra989
    @harmitchhabra989 2 роки тому +2

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

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome 😊

  • @keerthikitijaya-wardena6777
    @keerthikitijaya-wardena6777 Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

      Thank you very much :)

  • @AnnaMcDougall
    @AnnaMcDougall 3 роки тому +2

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

    • @Thirus
      @Thirus  3 роки тому

      Yay! Will remind you 😀

  • @atharvashah1362
    @atharvashah1362 3 роки тому +3

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

    • @Thirus
      @Thirus  3 роки тому

      Great! So glad it helped :)

  • @eliud_karuga
    @eliud_karuga Рік тому +2

    You made it so easy to understand especially for beginners

    • @Thirus
      @Thirus  Рік тому

      Thank you 😊

  • @hananibrahim9565
    @hananibrahim9565 2 роки тому +1

    Great and clear explantion of Tailwind CSS

  • @hasindukoshitha8398
    @hasindukoshitha8398 5 місяців тому

    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
      @Thirus  5 місяців тому

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

  • @lallyalallya9507
    @lallyalallya9507 2 роки тому +1

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

    • @Thirus
      @Thirus  2 роки тому

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

  • @raymondloranger941
    @raymondloranger941 2 роки тому +3

    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
      @Thirus  2 роки тому

      Very glad to hear that :)

  • @fixthebug2060
    @fixthebug2060 8 місяців тому +1

    underrated channel

  • @donnfelkeryt
    @donnfelkeryt 2 роки тому +1

    Absolutely amazing video. Great job.

    • @Thirus
      @Thirus  2 роки тому

      Thank you ☺️

  • @hamzamohd.zubair1709
    @hamzamohd.zubair1709 3 роки тому +1

    Best tutorials on tailwind

    • @Thirus
      @Thirus  3 роки тому

      Thank you :)

  • @saicharan1000
    @saicharan1000 2 роки тому +1

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

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome :)

  • @oomusou
    @oomusou 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому +1

      Working on it. Will upload that in a week

  • @ShaikAfshin
    @ShaikAfshin 9 місяців тому +1

    Excellent Demonstration Madam, Love you !

    • @Thirus
      @Thirus  9 місяців тому

      Thank you!

  • @sreekar_s
    @sreekar_s 3 роки тому +2

    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
      @Thirus  3 роки тому +2

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

    • @sreekar_s
      @sreekar_s 3 роки тому +2

      @@Thirus welcome 🙏

  • @veeramanikandans4069
    @veeramanikandans4069 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому

      I’m glad it helped 😊 You’re welcome

  • @fluttterdev1k
    @fluttterdev1k 9 місяців тому +1

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

    • @Thirus
      @Thirus  9 місяців тому

      Sure, thank you!

  • @saabirmohamed636
    @saabirmohamed636 3 роки тому +1

    excellent tutorials glad i found this channel

    • @Thirus
      @Thirus  3 роки тому

      Glad you enjoy it! :)

  • @amakhija1
    @amakhija1 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому

      That’s awesome! You’re welcome 😊

  • @kieran2347
    @kieran2347 3 роки тому +1

    Amazing Video, Shruti! Thank you!

    • @Thirus
      @Thirus  3 роки тому +1

      You’re welcome 😊

  • @xxoooOFxx
    @xxoooOFxx Рік тому +1

    Very well explained! Thank you, sis~!

    • @Thirus
      @Thirus  Рік тому

      You’re welcome :)

  • @kevincearns9739
    @kevincearns9739 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому

      Thank you 😊

  • @billionairepodcast
    @billionairepodcast 3 роки тому +1

    This is gold. Thank you

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome :)

  • @kaunteyasuryawanshi
    @kaunteyasuryawanshi 3 роки тому +1

    Thanks for making this tutorial. Was quite helpful.

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome! 😊

  • @SalebanCabdi-lz5dw
    @SalebanCabdi-lz5dw 3 місяці тому +1

    Hi sister, ❤❤thank you
    How well you explain it

    • @Thirus
      @Thirus  3 місяці тому

      You’re welcome :)

  • @oluwaseunladeinde410
    @oluwaseunladeinde410 7 місяців тому +1

    Thank you Thirus!

    • @Thirus
      @Thirus  7 місяців тому

      You’re welcome

  • @cryptoboy1461
    @cryptoboy1461 3 роки тому +1

    Great content! keep up the good work 👍🏼

    • @Thirus
      @Thirus  3 роки тому

      Thank you :)

  • @sirajcheppu
    @sirajcheppu 11 місяців тому +1

    Very informative even for beginners

    • @Thirus
      @Thirus  11 місяців тому

      Thank you!

  • @SyedIftikharUlIslam
    @SyedIftikharUlIslam 2 роки тому +1

    The exact content that I wanted...

  • @AlbertC64
    @AlbertC64 2 роки тому +1

    This is beautiful, thank you!

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome!

  • @hbela1000
    @hbela1000 Рік тому +1

    outstanding tuto !

  • @LastVoyage
    @LastVoyage 3 роки тому +1

    Your explanations are sooo good

    • @Thirus
      @Thirus  3 роки тому

      Thank you 😊

  • @devsuvara
    @devsuvara 3 місяці тому

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

  • @yousefhosny8864
    @yousefhosny8864 3 роки тому +2

    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
      @Thirus  3 роки тому +1

      Yes, the grid tutorial is in the making

  • @anilshrestha1272
    @anilshrestha1272 3 роки тому +1

    this is detailed .thank you

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @pushpakchhajed8845
    @pushpakchhajed8845 3 роки тому +1

    Amazing video!🔥

    • @Thirus
      @Thirus  3 роки тому

      Thank you Pushpak 😊

  • @thirdreplicator
    @thirdreplicator Рік тому +3

    +100 thumbs up.

  • @richamaheshwari7582
    @richamaheshwari7582 2 роки тому +1

    Really you explained too good.
    Thanks Shruti

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome Richa 😊

  • @Learningcenter46
    @Learningcenter46 Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

      Thank you 🙏😊

  • @williamsteinkedemello6916
    @williamsteinkedemello6916 2 роки тому +1

    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
      @Thirus  2 роки тому

      “flex flex-col md:flex-row”

  • @jorgeluizplautz6890
    @jorgeluizplautz6890 Рік тому +1

    Thanks for these information.

    • @Thirus
      @Thirus  Рік тому

      You’re welcome

  • @kunal-ko
    @kunal-ko Рік тому

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

    • @Thirus
      @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.

  • @Vivek-hv2rn
    @Vivek-hv2rn 2 роки тому +1

    Very detail explain maam thank u

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome :)

  • @RiazKhan-uv9wx
    @RiazKhan-uv9wx 3 роки тому +1

    Really well explained
    thank you

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @nimda2sdfsdfsd
    @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 ?

  • @mudassirkhan5036
    @mudassirkhan5036 Рік тому +2

    Awesome 😎

  • @shamimsarker3687
    @shamimsarker3687 2 роки тому +1

    Really, Impressive

    • @Thirus
      @Thirus  2 роки тому

      Thank you!

  • @kieran5746
    @kieran5746 3 роки тому +1

    Awesome, thanks very much!

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @sutikshanmishra2061
    @sutikshanmishra2061 2 роки тому

    flex-basis not working showing invalid property in console

  • @abelabbesnabi
    @abelabbesnabi Рік тому +1

    Good job!

  • @David-qr2dk
    @David-qr2dk 2 роки тому +1

    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
      @Thirus  2 роки тому +1

      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
      @David-qr2dk 2 роки тому

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

  • @edwardsernas5089
    @edwardsernas5089 2 роки тому +1

    Good video!

    • @Thirus
      @Thirus  2 роки тому

      Thank you!

  • @JT-gn4vo
    @JT-gn4vo 3 роки тому +1

    Thanks for this video :)

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @greendsnow
    @greendsnow Рік тому +1

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

  • @NuktaeAghaz
    @NuktaeAghaz Рік тому +1

    why no more videos . Thanks for this amazing video

    • @Thirus
      @Thirus  Рік тому +1

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

    • @NuktaeAghaz
      @NuktaeAghaz Рік тому +1

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

    • @NuktaeAghaz
      @NuktaeAghaz Рік тому +1

      @@Thirus 🙏 👍

    • @Thirus
      @Thirus  11 місяців тому

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

  • @tanveerbhutta8812
    @tanveerbhutta8812 2 роки тому

    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
      @Thirus  2 роки тому +1

      This video is for the older version. Check my latest video for installation and setup:
      ua-cam.com/video/h9Zun41-Ozc/v-deo.html

  • @tanzimibthesam5861
    @tanzimibthesam5861 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому +1

      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

  • @JohnWickXD
    @JohnWickXD Рік тому +1

    Thank u so much😁

    • @Thirus
      @Thirus  Рік тому

      You’re welcome!

  • @muhammadahsan9473
    @muhammadahsan9473 Рік тому +1

    very very great mam

  • @robertto1ify
    @robertto1ify 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому +1

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

  • @saeediqbal_DEV
    @saeediqbal_DEV Рік тому +1

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

    • @Thirus
      @Thirus  Рік тому

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

    • @saeediqbal_DEV
      @saeediqbal_DEV Рік тому +1

      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

  • @hiajayy
    @hiajayy 3 роки тому +1

    Thank you ma'am.

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome! 😊

  • @andikusnadi1979
    @andikusnadi1979 3 роки тому +1

    COOL
    , thank you

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome

  • @codelikealpha
    @codelikealpha 3 роки тому +1

    Thank you very much

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome!

  • @SusanthCom
    @SusanthCom 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому

      Do you mean Wordpress themes? Or just website themes?

    • @SusanthCom
      @SusanthCom 3 роки тому +1

      @@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
      @Thirus  3 роки тому +1

      Will need to do some research

    • @SusanthCom
      @SusanthCom 3 роки тому +1

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

  • @LordFullStack
    @LordFullStack 3 роки тому +1

    Awesome thanks

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @aaomms7986
    @aaomms7986 Рік тому +1

    Thank !!

  • @boyinapavan7926
    @boyinapavan7926 10 місяців тому +1

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

    • @Thirus
      @Thirus  10 місяців тому

      Sorry, I’m not much into Javascript

  • @quazisamihatasnim792
    @quazisamihatasnim792 3 роки тому +1

    Thank You

  • @jerome_ee6522
    @jerome_ee6522 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому +1

      Wow! So happy to know that!!

  • @neerajkandpal1506
    @neerajkandpal1506 3 роки тому

    thanks alot great content

    • @Thirus
      @Thirus  3 роки тому +1

      You’re welcome :)

  • @basudevbharatbhushan4873
    @basudevbharatbhushan4873 Рік тому +1

    THANKYOU

    • @Thirus
      @Thirus  Рік тому

      You’re welcome!

  • @ahmedabbas3981
    @ahmedabbas3981 Рік тому +1

    Thanks

    • @Thirus
      @Thirus  Рік тому

      You’re welcome!

  • @rangabharath4253
    @rangabharath4253 3 роки тому +1

    awesome

    • @Thirus
      @Thirus  3 роки тому +1

      Thank you 😊

  • @asfnobambu
    @asfnobambu 3 роки тому +1

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

    • @Thirus
      @Thirus  3 роки тому

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

  • @CTILET
    @CTILET Рік тому +1

    Like and subscribe! I try to find something like this

    • @Thirus
      @Thirus  Рік тому

      That’s great!

  • @learnfronteasy9642
    @learnfronteasy9642 2 роки тому +1

    hi I'm learning Tailwind in Persian language

    • @Thirus
      @Thirus  2 роки тому

      That’s great