Tailwind CSS Tutorial for Beginners (2023) - What YOU need to know

Подписаться 15 тыс.

Просмотров 100 тыс.

50% 1

In this video I will teach you everything that you need to know about Tailwind CSS and also show you how and when to use it in your own projects. You don't need to watch a 3 hour tutorial to learn Tailwind - this video should give you all the information’s that you need.
Tailwind Cheat Sheet: tailwindcomponents.com/cheats...

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

=== [ VIDEO CHAPTERS ] ===
00:00 - Intro
00:53 - Basics
01:47 - Benefits
03:05 - Setup
06:32 - My Advice
08:14 - Let's Create
14:33 - Customization
21:50 - Outro
#tailwindcss #tailwind #css

Опубликовано:

18 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 194

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

Like this comment if you want to see a whole video about Responsive Design with Tailwind CSS or more videos about Tailwind in general … 👍  If you have another topic that you want me to cover, leave me a comment. 😉⬇

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

The next video about Tailwind CSS is already in the making and I will probably drop it this weekend - so don't forget to subscribe to get notified when I post the video. 😉

@ngonidzashesendama2471 Год назад

@@lukas.webdev Already subscribed! 🙂😊 I would be delighted if we could collaborate on a live stream, working on Tailwind CSS projects for web and mobile applications (react native and tailwind css) .

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

@@ngonidzashesendama2471 Welcome! This really means a lot to me. 🤩 Thanks for this great idea, I’ll think about it ... 😉

@Jjextreme4411 Год назад

excellent Lukas,, looking forward to more!

@mr.fanstastic9010 11 месяцев назад

what do you mean by navigating to a folder?

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

Release a full series on tailwind. Not by building a clone of any popular site, rather showing us how to create and use numerous UI elements in multiple projects.

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

Sounds like an interesting idea to me! Thanks, I’ll think about it. 😉

@AlbertoRodriguezIII 4 месяца назад

@@lukas.webdev This would be great!

@user-mr9bz7tr4y 8 месяцев назад

This is the best video about tailwind, quick, says important stuff, it works for any framework you are working with, thank you! :)

@berakitesfu7008 Месяц назад

Great stuff buddy, keep the good work.

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

Thanks so MUCH love the video! dont stop and please dont quit youtube you will have a bright future!!!

@TLTechbender Месяц назад

Brilliant, straight to the point!!!

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

I LOVE THIS!!!! thank you so much 🙂

@Ownagin Месяц назад

Great video mate, straight to the point, useful information 👐

@FrhankMaduka-lh5vo 8 месяцев назад

Concise and clear. Thank you.

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

Great vid. Appreciate it a ton!

@StephenKarsch 4 месяца назад

Nice one. I've been struggling on and off with tailwind for a little bit, mostly the customization of components, but your explanation was very clear and concise and got me up and running quickly. Thank you!

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

Trust me if you make in depth tutorial about web development your channel will take off like a rocket. Your teaching style is really amazing. Keep the good work doing. Thanks for making such videos

@camilaalbuquerque1371 Месяц назад

much more helpful than many long articles or tutorials! thanks a lot for this video :D

@carlosm.1233 9 месяцев назад

Thank you for the great tutorial. It was short, concise and simple to follow. Please release a series where you show us how to build different UI components and more importantly how to customize them. That would be great. You gained a Subscriber here! Keep up the good work my man.

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

Thanks Lukas! I was confused why it wasn't working. Watching your video helped me realize that I was doing the installation of Tailwind CLI when I needed to be doing Tailwind CSS with Vite.

@thinkerhuh 4 месяца назад

THANK YOU SIR, you saved my life!

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

Thank you. I really appreciate the content. Very concise, yet detailed for starters. 😁

@elcontrastador 3 месяца назад

Very well done. Subscribed!

@alexlivadaru286 21 день назад

Thank you! Very useful tutorial!

@salijoghli Год назад

0:48 my man stared into my soul. couldnt't do anything but to like the video

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

Awesome, I'm happy to hear that my plan worked!! 😄💪 Thanks a lot buddy, I really appreciate it. 😉

@RM-zj3zb 7 месяцев назад

Thank you very much!

@DCWang-dk2gn 3 месяца назад

It's GOOD for me.Thanks.

@Ayman_youtube 21 день назад

Thank you ,well explained

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

thank u video, u provide a the best helpful tutorial.tailwind.css responsive design is very cool

@CodingCompanion-zr6vu 7 месяцев назад

thank u sooo very much sir 🙌🙌

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

Your teaching skills are awesome.

@vikumvirajmanchanayaka3163 Год назад

straight to the point, best explanation🙌

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

Thank you very much, I really appreciate it! 🤩

@afsarzan Год назад

Thank you for sharing , Lukas.

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

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

@baster7537 16 часов назад

Love it

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

Very concise and easy to follow

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

amazing beginner friendly work

@binukbe4401 Год назад

The best Tailwind CSS tutorial I have found so far. very informative. This channel needs to grow!🙌

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

Thank you, this really means a lot to me! 😉 I'm happy to hear that and I really appreciate your feedback! ... and you're right, this channel needs to grow! 😄💪

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

@@lukas.webdevi smashed the like button, i hate three hour tutorials!

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

@@mladenkaorlic Thanks, I really appreciate it! 😉

@fernandoli6743 2 месяца назад

Thx buddy, nice introduction

@MazharAli-uq3sx Год назад

Awesome dear Soo gald to see your video

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

Thank you! I'm glad you like it and I really appreciate your feedback! 😉

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

This is the best Tailwind CSS video on RU-vid! It's clear, concise, and engaging. Most RU-vid mentors don't have this teaching skill. Thank you so much for sharing your knowledge!

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

My pleasure! Thank you very much, this really means a lot to me!! 🤩 I'm glad you like it and I really appreciate your feedback!

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

It's the buzzing audio and reverb for me

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

Excellent video! Would love to see more about tailwind, especially responsive design

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

Thanks for your feedback, I'll consider it! 😉 PS: I just posted a very detailed video about creating responsive design with Tailwind CSS - this should also be very helpful for you ✌

@olivermgrech 13 дней назад

Hey Lukas! New to your channel, very good explanation thanks!

@adewaleadisa4346 6 дней назад

well done

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

Very good tutorial, straight to the point, thanks!

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

My pleasure! I’m glad you like it, thanks for your feedback. 😉

@dinesh.p8642 Месяц назад

Dhanyavaad ji.

@shadab-8 Год назад

Amazing nice quick intro video and helpful. I started using tailwind css few months and its really fun to work with as the utility class names are very intuitive.

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

Thanks! I really appreciate your feedback and you're absolutely right with that! BTW: I'm currently working on a video about Creating Responsive Design with Tailwind CSS and I will probably drop it next week - this should be super helpful for you, if you want to learn even more useful things about Tailwind... 😉

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

BTW: The new video is already online... 😉

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

I liked. But at the end, when I saw, that is worthed to like 😉 Nice work, Lukas...

@xungka Год назад

Thank you. Amazing video, you're make my day Lukas. You have 1 subcriber more here, keep going bro!!!

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

My pleasure, buddy! Thank you for your feedback and for the sub, this really means a lot to me. 🤩

@sidiebnou4958 4 месяца назад

great video.

@CerisPluto 18 дней назад

Thanks

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

Good information

@zuzukouzina-original 5 месяцев назад

Thnx for this clear video, it really help me started with tailwind css. I come from Bulma css, which is good too, but not so flexible as tailwind.

@ROVAKAN 2 месяца назад

Non boring , initial push giving tutorial . Thats my taste , sub++

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

Just subscribed. Keep up the good work 💐

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

Will do! Thank you very much, this really means a lot to me! 🤩

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

perfect 👍🏻

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

I'm glad you like it, thanks for your feedback! 😉

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

Awesomw explanation about tailwind css....

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

I'm glad you like it, thanks for your feedback! 😉

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

SUBBED!

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

This is awesome content bro you saved many hours. So thank you very much!! I became one of your subscriber 🙌

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

My pleasure, buddy! Thank you so much for your feedback and for the sub, it means the world to me!! 🤩

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

Gold content 💜

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

Thanks, I'm glad you it! 😉

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

thank you Sir!

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

You're welcome! 😉

@Pareshbpatel Месяц назад

A nice beginners tutorial on TailwindCSS. Thanks. {2024-05-16} - Subscribed!

@wadejohnson4542 Год назад

Well done. Yes, please include more on mobile-first design with Tailwind. As well as creating custom classes.

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

Thank you for your feedback. I really appreciate it! 😉 The video about Responsive Design with Tailwind CSS is already in the making and I will probably drop it this weekend - subscribe to get notified when I post the video 🤙

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

BTW: The new video is already online... 😉

@wadejohnson4542 Год назад

@@lukas.webdev I'm on it! Thank you so much for sharing your knowledge and helping others.

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

@@wadejohnson4542 My pleasure! 😉

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

Excellent channel. No idea how you don't have more subscribers.

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

Thanks, this really means a lot to me! I really appreciate your feedback. 😉

@freddyapaka6688 2 месяца назад

another video with more details on responsive design well be very much helpful

@luiseliasrodriguez4327 4 дня назад

Awesome lecture, super concise and clear, and yes you should keep doin React videos. Thanks.

@yuriyzadorozhnyi3849 Год назад

Дякую Вам за потрібну мені інформацію ! Thank you so much! Lots of love from Ukraine !

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

Будь ласка 😉

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

Awesome video. Congratulations! I want to know about the "in-production" build (with optimizations) and how apply obfuscation. Thanks!

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

Thanks Fernando! I'm glad you like it and I really appreciate your feedback. 😉 Also, thanks for the input - maybe I'll do a separate video about it.

@ansh_mittal Год назад

You are my newest favourite mentor ❤❤ great knowledge, you clear my all doubt.

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

Thank you! This really means a lot to me. 🤩 I'm glad I could help and I really appreciate your feedback!

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

@@lukas.webdev😊

@yashbansod1722 Год назад

Nice video ❤❤

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

I'm glad you like it and I really appreciate your feedback! 😉 Many more to come - make sure to subscribe so you don't miss out... ✌

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

Immediately subscribed

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

Thank you very much, this really means a lot to me! 🤩

@user-wr1gj6ix1b Год назад

nice one waiting for the full vdo on responsive design

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

Thanks for your feedback. I'm on it 😉 Don't forget to subscribe, to get notified when I drop the video...

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

BTW: The new video is already online... 😉

@GemsGoF Год назад

Please make more videos using tailwind css . I don't wanna use bootstrap any more. Thank you it was a great experience 😊 ❤

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

Thank you so much for your feedback, I'm happy to hear that! I already have: Next video will be online 1 hour ... 😉

@andreask.291 11 месяцев назад

oh yes, I love tailwind because it is processed quickly by the browser. You can also assign classes for everything. I find that useful. But I'm still at the very beginning. I didn't even know that you can define your own classes (customize tailwind) . Now, of course, I want to learn more about it. So, as for me, I'm up for more interesting lessons for us folks all over the internet. 🤔💬💡😀👍🤗 👏📝

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

Thanks for your feedback! Yes, Tailwind is awesome and I would love to create another video about it ... I'll see what I can do 😉

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

Superb man❤

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

Thanks buddy, this really means a lot to me! 🤩

@Sakshamojha15 Год назад

Nice video ❤

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

Thanks for your feedback, I'm happy that you like it! 😉

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

Please make full tutorial about tailwind css❤️

@navinkumarsahu1159 Год назад

Awesome video 😊 ❤️ from India

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

You're welcome! Thanks for your feedback, I really appreciate it. 😉

@georgiosmylonas3892 8 дней назад

I had to clear the cache of vite: `rm -rf node_modules/.vite` otherwise it wasn't working for some rason. Great tutorial!

@SebastianOnofrei 4 дня назад

Destroy the like button guys ! Lukas, your call to action was too good 😁

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

Nvm the tutorial. I was blown away with the like button rgb when you mentioned it

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

You hair looks good, thanks for the tut

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

Finally someone realizes that... 😄 My pleasure, thanks for your feedback! 😉

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

nice

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

Thanks, I'm happy to hear that! 😉

@emadmohamed5787 Год назад

Nice video Please we need a video for make a clone for RU-vid by tailwind css by your amazing style 😅

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

Thanks for your feedback, I really appreciate it. 😉 I am actually already working on a very similar video ... so stay tuned and subscribe to get notified when I drop the video. ✌

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

very beneficial, make more about videos responsive

@iriam7380 3 месяца назад

Hi Lukas, thanks for the master class. It's been amazing ! I was wondering If you could share the extension or app that you use to make your browser responsive. Thanks !!!

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

ABSOLUTELY LOVED THIS TUTORIAL. you wanted to destroy the like button. i also destroyed the follow and notification button as well.

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

Good Video. Very informational. Appreciate it. Liked and subscribed. (y)

@alexanderherreramillet87 22 дня назад

very usefull this video, thanks, i like a video for responsive, images, bye

@user-vl3fm1be6y Год назад

I liked

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

Thank you! I really appreciate it and I'm happy that you like it! 😉

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

I destroyed the like button but it respawned when I refreshed. Damn those devtools

@barbarosteomankosoglu6602 Год назад

A new subscriber here. Can you please make a video about your vscode setting, like theme, cursor etc.

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

Awesome, welcome! This really means a lot to me. 🤩 Thanks for your request, it's on my list now ... 😉

@guptodhan6695 Год назад

I'm from bangladesh,,,,,,you are really genius......

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

Thank you very much, I really appreciate it! 🤩

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

subscribed

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

Thank you very much Andreas, I really appreciate it! 🤩

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

I need responsive device in tailwind, Good lecture

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

Thanks for your feedback, I'm happy to hear that! I've also posted a video about how to create responsive Design with Tailwind CSS ... 😉

@hellboy6167 Год назад

Please do more videos on Tailwind

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

Thanks for your feedback, I'm happy that you like it! The next video about Tailwind CSS is already in the making and I will probably already drop it this weekend - subscribe to get notified when I post the video. 😉

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

BTW: The new video is already online... 😉

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

amazing content how do i get the pointer like you ????? that beeping pointer

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

you’re the HOMIE

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

Thanks buddy, I really appreciate it! 😉

@ravendelarama426 Год назад

New subscriber here

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

Awesome! Thank you so much, I really appreciate it. 😉

@riverwest360 Год назад

keep it up my brother . keep uploading...you are on fire 🔥

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

Thank you so much for your feedback, I really appreciate it! I'm on it bro! 😉 (Next video will be online 1 hour ... 🔥)

@elina.-.11 Месяц назад

thanks was good tutorial, but i have a question i want make some custom style and put it in default css file in react but i don't want make that css file too heavy how can i separate some code in that file to inside other css file? and i don't want import them in index.html file is there anyway to do that right now i put my style in object inside a js file and generally it's ridiculous if there is better way it might be very useful for me

@sidhoward 3 месяца назад

if you already have a react project open, can you still add tailwind? or do you have to start over. this tutorial for beginners is missing like 40% of all the pages in this book lol

@jackanderson300 3 месяца назад

Thank you sir for this classic video. I am just learning tailwind css.Have one doubt. why it is not taking full height at 10:03.As color is not applied in full height it takes some margin? For example you haven't set any margin still why it takes white space from top,left,right side?

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

What JavaScript extension generates that right angle between curly brackets?

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

It used to be an extension but now it's just a native functionality of the vs code editor ... 😉 Just add "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active" to your settings.json file to enable it or go to your VS Code Settings, search for "Bracket Pairs" and activate it.

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

I couldn't figure out how to install tailwind as I'm not onto learning react, vue, etc yet and I couldn't figure out the CLI method. If you're dumb like me, just use the CDN. It's as simple as copy and pasting the stylesheet link into your HTML. This isn't recommend for production, but to experiment with learning tailwind it's fine.