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

[@lukas.webdev]

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]

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]

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

[@mehrosenasir9974]

consider likes on your comment as yes to your question

[@dofrc6260]

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

[@rurallife764]

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

[@iseminini-ubong6595]

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

[@StevenJeffers-r2f]

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

[@PurnachandraBandaru-e4c]

The best video on Responsive Design using Tailwind CSS. Iam Tailwind Wizard now 🔥🔥🔥

[@MennaAhmed-lq3uj]

thats a smooth and on point video thanks for explaining parts like that

[@blank9155]

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]

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

[@Htbaa]

Did not know about the breakpoint range, that's very useful!

[@michelemoneywell8765]

Liked and subscribed. I am only at the 7:56 point, but so thankful for your explanation about sm, md, etc, screen sizes and mobile first development. Coming from straight CSS, it was "design for desktop" and then have media queries for max not min screen widths to adjust the layout for smaller screens. Now that I understand this basic Tailwind concept by your explanation, I will be better able to use it. Yes, I have heard the phrase "Tailwind is mobile first development" numerous times, but had not heard or understood how that applies. Thank you for your explanation.

[@tiktalk4573]

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

[@lukas.webdev]

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

[@murali-krishnan]

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

[@AyushTiwari-h1l]

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

[@lukas.webdev]

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

[@vfshera]

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

[@yanfung9081]

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]

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

[@yuriyzadorozhnyi3849]

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

[@lukas.webdev]

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

[@user-nu5ib2ri9o]

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

[@glenfordholder6441]

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

[@devancejoshi8070]

Really informative. Keep up the good work.

[@lukas.webdev]

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

[@kaizara4421]

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]

Great tutorial. You cover all the bases!

[@yogiyang3429]

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

[@lukas.webdev]

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

[@rashmi_t]

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

[@torontodough2755]

Sehr klug. Danke!

[@JonoPadoa]

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!

[@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.

[@shadeenTvby_mohi]

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

[@msrilalith2292]

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]

Excellent video!

[@lukas.webdev]

Thanks, I really appreciate it! 😉

[@ciandrapancho8716]

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

[@devL.A]

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

[@lukas.webdev]

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

[@vampirekabir]

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

[@lukas.webdev]

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

[@peroforrr7663]

Yeah this one cool ❤

[@lukas.webdev]

Thanks, I really appreciate it! 🤩

[@Daily_Mot1vation_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.

[@educates_ourselves]

thank you i need tailwind css video like that

[@lukas.webdev]

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

[@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 ❤

[@Hrit]

Very well explained. Thank You!

[@lukas.webdev]

My pleasure, thanks for your feedback! 😉

[@R3nxt]

Great Tutorial, thanks for not wasting our time

[@Stasy76]

Hi, first of all: thank you for the straightforward introduction to using Tailwind CSS. I have some questions: In your section tag you add “md:grid-cols-2” to the className property. The section tag contains 2 div tags. What would happen if there were 3 div tags inside the section tag? Does the number of divs have to match the number of grid-cols-? What happens if is higher or lower than the number of divs within the section tag? For example, how would you define a layout with a breakpoint for ultra wide monitors (where we want to have 3 columns), and below that breakpoint + higher than 'md' we would only have 2 columns. Since we would need 3 divs for the ultra wide monitors breakpoint, which 2 would be placed below each other? Perhaps you could create a video tutorial for advanced use of Tailwind CSS by creating a more complex demo project that more closely resembles a real website. Thank you very much!

[@michelemoneywell8765]

grid and grid-cols-2 works the same in regular CSS (grid and grid-template-columns: repeat(2, 50%). If there are more items than the number of columns specified, they will go on the next lines.

[@rayusaki88]

Very helpful! Thanks 🙏🏻

[@lukas.webdev]

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

[@MasumRana-db5jf]

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

[@MrOnais321]

amazing video

[@gangwang9641]

perfect, thank u video.expect more videos.

[@yipmong]

Thank you for this awesome video 🎉❤

[@abhisheksinha1999]

Clean and to the point. Thanksss

[@thatsalot3577]

Love the intro

[@zubairahmed2660]

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

[@nuuradiinhassan]

cool and wonderful video I have ever watched

[@mladenkaorlic]

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

[@lukas.webdev]

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

[@mladenkaorlic]

I hope so, keep up the good work ❤

[@lukas.webdev]

@@mladenkaorlic Will do! 🫶

[@emmanuelo1177]

AMAZING TEACHER!!! 👍

[@assad-rajab]

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

[@saadarman4718]

Simply brilliant. 👍

[@Atul_25]

Really awesome 😎

[@aaomms7986]

It's really help me!! thank!!

[@lukas.webdev]

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

[@abhijithj2115]

great🔥

[@lukas.webdev]

Thanks, I really appreciate it! 😉

[@lakshayyadav9850]

short precise best you earned a subscriber!

[@syrian167]

very helpful tutorial, thanks

[@kamichikora6035]

Great video

[@primegossips]

Thanks LuKas ♥ ♥

[@ZxWq678]

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

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

[@dulcisfate6060]

Thanks man! Helps a lot

[@codingbyte847]

Thanks a lot, You saved me🥰

[@fridayokorie2642]

Helpful video.

[@medanish]

Well explained ❤

[@lukas.webdev]

Thanks, I'm glad you like it! 😉

[@medanish]

@@lukas.webdev keep up the good work 💯

[@lukas.webdev]

@@medanish Will do! 😉

[@pauloricardomaltaleal3558]

great video, thankyou

[@saitejadamaraju5408]

Thank you so much man.

[@Pareshbpatel]

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

[@michaelsolomon6033]

Thank you lukas

[@mihirdutta-DPSi]

3.09 Responsiveness begins

[@wesleychigbu7335]

Would love to see tutorials for using max-width

[@codesaif8075]

Thanks it helped me

[@webdrakib]

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

[@lukas.webdev]

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

[@ask-wj2pf]

Thankyou. 👍👍🏿

[@gauravsonar9872]

Thanks❤

[@chitsuwailin7733]

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

[@gamesofmoney3903]

Thank you🤗

[@TedomTafotsiDimitriWilfried]

Thank you !🙏

[@careuanimation]

good job done

[@milankovacs4259]

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

[@eyesopenwide3560]

very helpful

[@Octet-1]

Please make more and more on responsive design

[@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

[@TanbhirSiddiqui]

I need more tutorial. Please Continue

[@lukas.webdev]

Will do! Thanks for your feedback! 😉

[@Neur0123]

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

[@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,

[@xpeugames]

♥ Nice ♥ Brazil ♥ Fortaleza-CE ♥

[@saulhuarcayaquispe5236]

Buen video gringo te ganaste mi like ty.

[@mutonirebecca3017]

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

[@GeorgesVernier]

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

[@atharv5432]

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?

[@southredmondtoxik1885]

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

[@existentialism_01]

hello lukas, am new to tailwind and i wanted to get a column layout between 320px and 768px but this does not works

[@jomarcerrado6681]

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]

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]

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

[@TonyTran-wv2ov]

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

[@andyl9920]

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?

[@deepakbind6774]

Tailwind

[@theto6]

nc video

[@lukas.webdev]

Thanks, I really appreciate it! 😉

[@tenebrae1191]

👏

[@lukas.webdev]

Thanks mate! 😉

[@prime2000era]

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

[@lukas.webdev]

Yes, that would be super helpful!! 🤩

[@aalamsaroya]

8:00

[@ycombinator765]

GigaChad

[@HousseinDroubi-o9i]

Hello, good.

[@amanfrmearth]

Why does it feel like chatgpt script

[@BilalAnwar-pk5pf]

❤