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

Поделиться
HTML-код
  • Опубликовано: 13 июн 2024
  • In this video I will teach you how to create Responsive Web Designs with Tailwind CSS. This video covers everything you need to know, from the basics to breakpoints & breakpoint ranges and even customization options - this video should give you all the information’s that you need.
    Tailwind CSS Tutorial (2023): • Tailwind CSS Tutorial ...

    === [ LIKE & SUBSCRIBE ] ===
    Please LIKE the video if you enjoyed it and
    SUBSCRIBE to the channel for more videos like that.
    RUclips ► www.youtube.com/@lukas.webdev...
    Instagram ► / lukas.webdev

    === [ VIDEO CHAPTERS ] ===
    00:00 - Intro
    00:56 - Basics
    02:16 - Breakpoints
    07:51 - Breakpoint Range
    10:21 - Customization
    15:57 - Bonus
    16:36 - Outro
    #tailwindcss #tailwind #responsivewebdesign

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

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

    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  Год назад +6

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

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

      consider likes on your comment as yes to your question

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

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

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

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

  • @iseminini-ubong6595
    @iseminini-ubong6595 7 месяцев назад +12

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

  • @user-ol8jr6kk2y
    @user-ol8jr6kk2y 6 месяцев назад +2

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

  • @murali-krishnan
    @murali-krishnan 6 месяцев назад

    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.

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

    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.

  • @tiktalk4573
    @tiktalk4573 11 месяцев назад +7

    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  11 месяцев назад +1

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

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

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

  • @user-wz7pw7sp7r
    @user-wz7pw7sp7r Месяц назад

    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!

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

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

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

    Thanks man! Helps a lot

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

    Simply brilliant. 👍

  • @blank9155
    @blank9155 11 месяцев назад +10

    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  11 месяцев назад +1

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

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

    Clean and to the point. Thanksss

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

    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 ❤

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

    perfect, thank u video.expect more videos.

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

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

  • @yanfung9081
    @yanfung9081 11 месяцев назад +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  11 месяцев назад

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

  • @torontodough2755
    @torontodough2755 7 месяцев назад +1

    Sehr klug. Danke!

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

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

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

    AMAZING TEACHER!!! 👍

  • @user-el3dc8nx4m
    @user-el3dc8nx4m 9 месяцев назад +1

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

    • @lukas.webdev
      @lukas.webdev  8 месяцев назад

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

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

    Thank you so much man.

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

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

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

    Really informative. Keep up the good work.

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

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

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

    Really awesome 😎

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

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

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад +1

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

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

    Awesome video... your explanation approach is very good.

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

    very helpful tutorial, thanks

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

    short precise best
    you earned a subscriber!

  • @growupzone
    @growupzone 9 месяцев назад +2

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

    • @lukas.webdev
      @lukas.webdev  9 месяцев назад

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

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

    great video, thankyou

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

    Helpful video.

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

    Thank you🤗

  • @R3nxt
    @R3nxt 15 дней назад

    Great Tutorial, thanks for not wasting our time

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

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

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

    3.09 Responsiveness begins

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

    Love the intro

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

    Thank you lukas

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

    very helpful

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

    Thankyou. 👍👍🏿

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

    Very helpful! Thanks 🙏🏻

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад

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

  • @vampirekabir
    @vampirekabir 11 месяцев назад +1

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

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад

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

  • @yogiyang3429
    @yogiyang3429 9 месяцев назад +1

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

    • @lukas.webdev
      @lukas.webdev  9 месяцев назад

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

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

    Thanks LuKas ♥ ♥

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

    good job done

  • @Hrit
    @Hrit 11 месяцев назад +1

    Very well explained. Thank You!

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад +1

      My pleasure, thanks for your feedback! 😉

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

    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.....
    😄😃😃

  • @Jefferrey1
    @Jefferrey1 11 месяцев назад +1

    Excellent video!

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад

      Thanks, I really appreciate it! 😉

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

    Buen video gringo te ganaste mi like ty.

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

    Yeah this one cool ❤

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

      Thanks, I really appreciate it! 🤩

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

    It's really help me!! thank!!

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад +1

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

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

    Would love to see tutorials for using max-width

  • @The_Real_World_pl
    @The_Real_World_pl 5 месяцев назад +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.

  • @abhijithj2115
    @abhijithj2115 9 месяцев назад +1

    great🔥

    • @lukas.webdev
      @lukas.webdev  9 месяцев назад

      Thanks, I really appreciate it! 😉

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

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

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад +1

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

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

      I hope so, keep up the good work ❤

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад

      @@mladenkaorlic Will do! 🫶

  • @xpeugames
    @xpeugames 8 месяцев назад +1

    ♥ Nice ♥ Brazil ♥ Fortaleza-CE ♥

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

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

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад +1

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

  • @medanish
    @medanish 11 месяцев назад +1

    Well explained ❤

    • @lukas.webdev
      @lukas.webdev  11 месяцев назад

      Thanks, I'm glad you like it! 😉

    • @medanish
      @medanish 11 месяцев назад +1

      @@lukas.webdev keep up the good work 💯

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад

      @@medanish Will do! 😉

  • @milankovacs4259
    @milankovacs4259 17 дней назад

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

  • @user-he1lz5iu5n
    @user-he1lz5iu5n 10 месяцев назад +1

    I need more tutorial. Please Continue

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад

      Will do! Thanks for your feedback! 😉

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

    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

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

    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

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

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

  • @user-kh6rp6yx1j
    @user-kh6rp6yx1j 24 дня назад

    Hello, good.

  • @theto6
    @theto6 9 месяцев назад +1

    nc video

    • @lukas.webdev
      @lukas.webdev  8 месяцев назад +1

      Thanks, I really appreciate it! 😉

  • @tenebrae1191
    @tenebrae1191 11 месяцев назад +1

    👏

  • @ZxWq678
    @ZxWq678 9 месяцев назад +1

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

    • @lukas.webdev
      @lukas.webdev  8 месяцев назад

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

  • @Neur0123
    @Neur0123 9 месяцев назад +1

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

    • @lukas.webdev
      @lukas.webdev  8 месяцев назад

      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,

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

    GigaChad

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

    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?

  • @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  11 месяцев назад

      Yes, that would be super helpful!! 🤩

  • @jomarcerrado6681
    @jomarcerrado6681 11 месяцев назад +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  11 месяцев назад +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 10 месяцев назад +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.

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

    You look like Xabi Alonso

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

    Why does it feel like chatgpt script

  • @Pareshbpatel
    @Pareshbpatel 29 дней назад

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

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

    thank you i need tailwind css video like that

    • @lukas.webdev
      @lukas.webdev  10 месяцев назад

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

  • @andreask.291
    @andreask.291 11 месяцев назад +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  11 месяцев назад

      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 😉