The BEST Way to Create Responsive Design with Tailwind CSS (2024)

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 149

  • @lukas.webdev
    @lukas.webdev  Год назад +117

    Should I create more videos about Tailwind or what kind of content do you want to see next on this channel? - leave me a comment... 🧐⬇

    • @Hajir2005
      @Hajir2005 Год назад +9

      Would love to see you creating a template using tailwind css and react with best practices. something that has a unique design with navbar, sidebar, possibly animations as a started template.

    • @lukas.webdev
      @lukas.webdev  Год назад +7

      @@Hajir2005 Thanks for your request! Sounds like an interesting idea to me, I’ll think about it. 😉

    • @mehrosenasir9974
      @mehrosenasir9974 Год назад

      consider likes on your comment as yes to your question

    • @dofrc6260
      @dofrc6260 Год назад

      please create more viedeos about tailwind. i like your explanation style

    • @rurallife764
      @rurallife764 Год назад

      Please create video tutorial design template website responsive using TailwindCss. Thank you brother.

  • @iseminini-ubong6595
    @iseminini-ubong6595 Год назад +20

    Spot on! No unnecessary intros and long talk just straight to the point! Thanks Lukas

  • @StevenJeffers-r2f
    @StevenJeffers-r2f 11 месяцев назад +6

    Im gunna open up all of your videos without even watching them yet, because I like how you teach.

  • @blank9155
    @blank9155 Год назад +12

    I was having trouble understanding breakpoints and how to implement Tailwind for responsive resizing but this video made it so much clearer!! Thank you and looking forward to more videos! 😁

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      Thank you! This really means a lot to me. 😉
      I'm glad it is was helpful and I really appreciate your feedback! ✌

  • @tiktalk4573
    @tiktalk4573 Год назад +9

    Really beginner friendly and clean intructions. I watched a bunch of tutorials but your way of instructions seem to work for me!

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      Thanks, this really means a lot to me! 🤩
      I'm happy to hear that and I appreciate your feedback! 😉

  • @murali-krishnan
    @murali-krishnan 11 месяцев назад +1

    Thx for the spot-on tutorial man. Like you said, I couldn't find any "Breakpoint Range" tutorial on RUclips. I finally found this video by modifying the search filter to "this month" on the RUclips search.

  • @vfshera
    @vfshera 10 месяцев назад +1

    I didn't know about breakpoint range. Glad I watched this video🔥

  • @AyushTiwari-h1l
    @AyushTiwari-h1l Год назад +1

    Really appreciated your effort. I was confused really a lot in these but know it's all Clear.

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure! I'm glad to hear that, thanks for the feedback. 😉

  • @rashmi_t
    @rashmi_t 7 месяцев назад

    You are an amazing teacher. Thank you for the easy to understand Tailwind course

  • @kaizara4421
    @kaizara4421 3 месяца назад

    Hi bro from the philippines, i really really love all of your videos related to tailwind, i had been having a hard time to make a tons of code using native css since i saw your videos. As a backend developer this could really helped me a lot to save some times.

  • @gastonarevalo1237
    @gastonarevalo1237 9 дней назад

    Great tutorial. You cover all the bases!

  • @user-nu5ib2ri9o
    @user-nu5ib2ri9o 3 месяца назад

    Thanks! This is a very clear, no-nonsense video, I really enjoyed it.

  • @Daily_Mot1vation_1
    @Daily_Mot1vation_1 10 месяцев назад +1

    Tnaks a lot. It is my the first time to watching tailwind lesson and it is absolutly new for me. And I have some trouble to undertand. Could you give me link of website which u used in ur video.

  • @Pareshbpatel
    @Pareshbpatel 6 месяцев назад

    Responsive design with TailwindCSS, beautifully explained. Thanks, Lukas.
    {2024-05-16}, {2024-05-18},{2024-09-16}

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 Год назад +2

    It’s so cool and simple way you teach👍🏻👍🏻 Thanks !

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      My pleasure! I'm happy to hear that you like it. 😉

  • @rutikkapare6340
    @rutikkapare6340 Год назад

    you are teach very simple and very effictive manner I watched a bunch of tutorials but your way of instructions seem to work for me😍 Thank you Lukas ❤

  • @glenfordholder6441
    @glenfordholder6441 2 месяца назад

    Great tutorial i have seen a video like this on youtube IT WAS SO INFORMATIVE.

  • @msrilalith2292
    @msrilalith2292 11 месяцев назад

    Wow
    Super Cool and Informative lecture, thanks for this.
    I am at beginner - intermediate at react+tailwind, Love This video.
    This is the first time I have watch one of your videos and have already become a fan of your style of teaching,
    will stick around and learn a lot from you.....
    😄😃😃

  • @devL.A
    @devL.A Год назад +2

    Thanks, that was one of the best explains i ever watched ❤

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure, I'm very happy to hear that!
      Thanks for your feedback, it means a lot to me! 🤩

  • @JonoPadoa
    @JonoPadoa 6 месяцев назад

    Fantastic video mate. I have a project that my friend has now asked me to make responsive so this is a HUGE help! Will be checking out the rest of your videos too. Great job!

  • @devancejoshi8070
    @devancejoshi8070 Год назад +3

    Really informative. Keep up the good work.

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      Will do! Thank you buddy, I really appreciate the feedback! 😉

  • @ciandrapancho8716
    @ciandrapancho8716 Год назад

    I have very little knowledge about responsive design in Tailwind CSS, you helped me understand it. Thank you! Subscribed and liked.

  • @keitho6974
    @keitho6974 7 месяцев назад

    I want to say thank you for this clear and easy to follow tutorial. I have both liked and subscribed and I can't wait to catch up on your newest videos.

  • @shadeenTvby_mohi
    @shadeenTvby_mohi 6 месяцев назад

    Great Man. Your tutotial is loud and clear.. thanks

  • @yanfung9081
    @yanfung9081 Год назад +4

    Thanks so much Lukas! Wow I've learnt so much from your videos! I really like how clear you explained everything :) Keep up the great work!!!

    • @lukas.webdev
      @lukas.webdev  Год назад

      You're welcome! I'm soo happy to hear that - this really means a lot to me. 🤩

  • @mihirdutta-DPSi
    @mihirdutta-DPSi 11 месяцев назад +3

    3.09 Responsiveness begins

  • @torontodough2755
    @torontodough2755 Год назад +1

    Sehr klug. Danke!

  • @yogiyang3429
    @yogiyang3429 Год назад +1

    Thank you for creating this very important Video. I helped me a lot!!

    • @lukas.webdev
      @lukas.webdev  Год назад

      You're very welcome! Thanks for your feedback, it helps me a lot! 😉

  • @R3nxt
    @R3nxt 5 месяцев назад

    Great Tutorial, thanks for not wasting our time

  • @vampirekabir
    @vampirekabir Год назад +1

    amazing ,thanks so much,this was very complete and comprehensive tutorial,loved ur teaching and examples

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure! I’m glad you like it and I really appreciate your feedback! 😉

  • @Hrit
    @Hrit Год назад +1

    Very well explained. Thank You!

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      My pleasure, thanks for your feedback! 😉

  • @rayusaki88
    @rayusaki88 Год назад +1

    Very helpful! Thanks 🙏🏻

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure! I'm happy to hear that! 😉

  • @abhisheksinha1999
    @abhisheksinha1999 8 месяцев назад

    Clean and to the point. Thanksss

  • @Octet-1
    @Octet-1 Месяц назад

    Please make more and more on responsive design

  • @MasumRana-db5jf
    @MasumRana-db5jf 8 месяцев назад

    Thanks a lot brother. It was a very helpful video for me.

  • @Jefferrey1
    @Jefferrey1 Год назад +1

    Excellent video!

    • @lukas.webdev
      @lukas.webdev  Год назад

      Thanks, I really appreciate it! 😉

  • @gangwang9641
    @gangwang9641 Год назад

    perfect, thank u video.expect more videos.

  • @nuuradiinhassan
    @nuuradiinhassan 4 месяца назад

    cool and wonderful video I have ever watched

  • @wesleychigbu7335
    @wesleychigbu7335 Год назад

    Would love to see tutorials for using max-width

  • @emmanuelo1177
    @emmanuelo1177 10 месяцев назад

    AMAZING TEACHER!!! 👍

  • @MrOnais321
    @MrOnais321 Месяц назад

    amazing video

  • @saadarman4718
    @saadarman4718 Год назад

    Simply brilliant. 👍

  • @codingbyte847
    @codingbyte847 8 дней назад

    Thanks a lot, You saved me🥰

  • @lakshayyadav9850
    @lakshayyadav9850 Год назад

    short precise best
    you earned a subscriber!

  • @zubairahmed2660
    @zubairahmed2660 27 дней назад

    Amazing video, by watching this video I became your subscriber 😍🥰

  • @Atul_25
    @Atul_25 7 месяцев назад

    Really awesome 😎

  • @syrian167
    @syrian167 7 месяцев назад

    very helpful tutorial, thanks

  • @peroforrr7663
    @peroforrr7663 Год назад +2

    Yeah this one cool ❤

    • @lukas.webdev
      @lukas.webdev  Год назад

      Thanks, I really appreciate it! 🤩

  • @mladenkaorlic
    @mladenkaorlic Год назад +1

    i enjoy your videos so much and also learn so much ❤

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      I'm so glad to hear that! Thank you very much - many more to come! 🤩

    • @mladenkaorlic
      @mladenkaorlic Год назад +1

      I hope so, keep up the good work ❤

    • @lukas.webdev
      @lukas.webdev  Год назад

      @@mladenkaorlic Will do! 🫶

  • @thatsalot3577
    @thatsalot3577 10 месяцев назад

    Love the intro

  • @dulcisfate6060
    @dulcisfate6060 5 месяцев назад

    Thanks man! Helps a lot

  • @codesaif8075
    @codesaif8075 2 месяца назад

    Thanks it helped me

  • @saitejadamaraju5408
    @saitejadamaraju5408 6 месяцев назад

    Thank you so much man.

  • @assad-rajab
    @assad-rajab 11 месяцев назад

    Great explaining! Talking speed is also perfect for non-English speakers. Showing from the primary docs is also an excellent example for the new learners. This is my first time watching your videos, and I directly subscribed. Thank you Lukas

  • @pauloricardomaltaleal3558
    @pauloricardomaltaleal3558 11 месяцев назад

    great video, thankyou

  • @aaomms7986
    @aaomms7986 Год назад +1

    It's really help me!! thank!!

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      You're welcome! I'm happy to hear that! 😉

  • @educates_ourselves
    @educates_ourselves Год назад +1

    thank you i need tailwind css video like that

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure! I’m glad you like it and I appreciate your feedback! 😉

  • @fridayokorie2642
    @fridayokorie2642 Год назад

    Helpful video.

  • @ask-wj2pf
    @ask-wj2pf 10 месяцев назад

    Thankyou. 👍👍🏿

  • @gamesofmoney3903
    @gamesofmoney3903 7 месяцев назад

    Thank you🤗

  • @gauravsonar9872
    @gauravsonar9872 11 дней назад

    Thanks❤

  • @webdrakib
    @webdrakib Год назад +1

    ❤❤❤❤❤❤❤❤❤❤
    Wow. I really like your vids
    ❤❤❤❤❤❤❤❤❤❤
    Please make more
    You're very good

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      Will do! Thank you buddy, I really appreciate your feedback and I'm super happy to hear that! 🤩

  • @ZxWq678
    @ZxWq678 Год назад +1

    اخي شرحك ممتاز،. ماهو نوع المتصفح الذي تستخدمه لجعله متجاوب مع كل الشاشات؟!

    • @lukas.webdev
      @lukas.webdev  Год назад

      Thanks, I'm glad you like it! 😉
      Sorry, but I don't really understand your question. I use the Mozilla Firefox Browser in this tutorial, but I don't think that this is the answer you are looking for ...?

  • @primegossips
    @primegossips 10 месяцев назад

    Thanks LuKas ♥ ♥

  • @kamichikora6035
    @kamichikora6035 3 месяца назад

    Great video

  • @chitsuwailin7733
    @chitsuwailin7733 Год назад

    amazing.........thanks much

  • @TedomTafotsiDimitriWilfried
    @TedomTafotsiDimitriWilfried 3 дня назад

    Thank you !🙏

  • @careuanimation
    @careuanimation 8 месяцев назад

    good job done

  • @michaelsolomon6033
    @michaelsolomon6033 8 месяцев назад

    Thank you lukas

  • @GeorgesVernier
    @GeorgesVernier 9 месяцев назад

    You should use cmd + d or cmd + shift + L to do multi-keyword editting all at once ;)

  • @TanbhirSiddiqui
    @TanbhirSiddiqui Год назад +1

    I need more tutorial. Please Continue

    • @lukas.webdev
      @lukas.webdev  Год назад

      Will do! Thanks for your feedback! 😉

  • @abhijithj2115
    @abhijithj2115 Год назад +1

    great🔥

    • @lukas.webdev
      @lukas.webdev  Год назад

      Thanks, I really appreciate it! 😉

  • @eyesopenwide3560
    @eyesopenwide3560 9 месяцев назад

    very helpful

  • @medanish
    @medanish Год назад +1

    Well explained ❤

    • @lukas.webdev
      @lukas.webdev  Год назад

      Thanks, I'm glad you like it! 😉

    • @medanish
      @medanish Год назад +1

      @@lukas.webdev keep up the good work 💯

    • @lukas.webdev
      @lukas.webdev  Год назад

      @@medanish Will do! 😉

  • @xpeugames
    @xpeugames Год назад +1

    ♥ Nice ♥ Brazil ♥ Fortaleza-CE ♥

  • @TonyTran-wv2ov
    @TonyTran-wv2ov Месяц назад

    The best tutorial. In the last few seconds of the video, did you just said "Chao" ? Is that Vietnamese ? 😯

  • @milankovacs4259
    @milankovacs4259 6 месяцев назад

    What plugin or what do you use to get your cursor blinking to be that shrinking in-out animation?

  • @saulhuarcayaquispe5236
    @saulhuarcayaquispe5236 Год назад

    Buen video gringo te ganaste mi like ty.

  • @saimsahi6597
    @saimsahi6597 Год назад

    Hi Lukas ,
    could u plz simply some points here .if we take sm 640px for mobile version is this included mobile landscape as well ?
    also plz clarify this does sm 640px supports small screens both apple and android for example iPhone 12min etc .
    if u more kind enough plz write a sample code for small mobile to 2xl code including landscape etc .thanks

  • @mutonirebecca3017
    @mutonirebecca3017 4 месяца назад

    Thank you for this good video. Some people and the documention mention that by default tailwind css is mobile reponsive. Is it true?

  • @theto6
    @theto6 Год назад +1

    nc video

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      Thanks, I really appreciate it! 😉

  • @ogulcanyavuz
    @ogulcanyavuz Год назад +1

    i wish tailwind had a native clamp function, that's the only problem i have with tailwind so far

    • @lukas.webdev
      @lukas.webdev  Год назад

      Yes, that would be super helpful!! 🤩

  • @Neur0123
    @Neur0123 Год назад +1

    What is the extension called that highlights the current code block?

    • @lukas.webdev
      @lukas.webdev  Год назад

      That's not an extension, that's a built-in feature from VS Code ... 😉
      Just add the following to your settings.json file:
      "editor.guides.bracketPairs": "active",
      "editor.bracketPairColorization.enabled": true,

  • @tenebrae1191
    @tenebrae1191 Год назад +1

    👏

  • @jomarcerrado6681
    @jomarcerrado6681 Год назад +1

    Hi sir.
    as a beginner like me should i start designing my web in mobile size? i am starting learning in responsive design but I'm having a hard time to know the different components of responsive breakpoints in Tailwindcss. thank you

    • @lukas.webdev
      @lukas.webdev  Год назад +1

      It depends...
      With Tailwind you should use the mobile-first approach (like I mentioned in the video), which means you start designing and creating your mobile version first and then adapt it to larger screen sizes. Mobile-First is generally the better approach imo, but there are also many developers who use pure CSS or other frameworks and create the desktop version first and then adapt it for smaller screen sizes...
      You should be able to find all the information's that you need about breakpoints in Tailwind CSS in this video or at tailwindcss.com/docs/responsive-design 😉

    • @jomarcerrado6681
      @jomarcerrado6681 Год назад +1

      @@lukas.webdev thank you for the response. maybe i should go first in mobile, then adapt it to bigger screen. thank you so much.

  • @K_Andreas
    @K_Andreas Год назад +1

    Thank you very much. I like the kind of explanations: interesting, understandable, descriptive and practical. Can I have some more, please. Tailwind, React, responsiveness, etc. 🦴🐶 Would be great.

    • @lukas.webdev
      @lukas.webdev  Год назад

      My pleasure, buddy! Thank you for the feedback, I am happy to hear that and yes, I will post more videos about those topics pretty soon 😉

  • @HousseinDroubi-o9i
    @HousseinDroubi-o9i 6 месяцев назад

    Hello, good.

  • @southredmondtoxik1885
    @southredmondtoxik1885 14 дней назад

    Bro I am a desktop first designer. So I wanted to chnage min width to max width. How to do it

  • @ycombinator765
    @ycombinator765 Год назад

    GigaChad

  • @atharv5432
    @atharv5432 4 месяца назад

    Hey! I have a doubt.
    My width of my website looks good on every mobile device. The height is the issue. My content fits properly (height wise) in some mobile devices, in some it overflows in y direction so i have to scroll down to see my content. How do I fix this issue?

  • @andyl9920
    @andyl9920 10 месяцев назад

    I want to focus on front end. My mentor is instructing me to use bootstrap but i see a lot of folks online stating to use tailwind css. Which one should i use. Is bootstrap ok for frontend?

  • @amanfrmearth
    @amanfrmearth 11 месяцев назад +2

    Why does it feel like chatgpt script

  • @aalamsaroya
    @aalamsaroya 3 месяца назад

    8:00

  • @eyadbinamir4985
    @eyadbinamir4985 7 месяцев назад

    You look like Xabi Alonso