Tailwind CSS Tutorial for Beginners (2023)

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

Рет қаралды 100,112

Күн бұрын

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.
KZfaq ► 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

Пікірлер: 195

@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! :)

@FrhankMaduka-lh5vo 8 ай бұрын

Concise and clear. Thank you.

@TLTechbender Ай бұрын

Brilliant, straight to the point!!!

@Ttozyy 5 ай бұрын

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

@andrew_mandrichuk 9 ай бұрын

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

@berakitesfu7008 Ай бұрын

Great stuff buddy, keep the good work.

@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

@Tjommel Күн бұрын

Awesome video. thank you!

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

@thinkerhuh 4 ай бұрын

THANK YOU SIR, you saved my life!

@Ayman_youtube 22 күн бұрын

Thank you ,well explained

@ErsteSkywalker 7 ай бұрын

Great vid. Appreciate it a ton!

@alexlivadaru286 23 күн бұрын

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

@Ownagin Ай бұрын

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

@DCWang-dk2gn 3 ай бұрын

It's GOOD for me.Thanks.

@markantony9260 5 ай бұрын

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

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

@joeyx4056 7 ай бұрын

Very concise and easy to follow

@codeakmnru 10 ай бұрын

This is the best Tailwind CSS video on KZfaq! It's clear, concise, and engaging. Most KZfaq 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

@camilaalbuquerque1371 Ай бұрын

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

@elcontrastador 3 ай бұрын

Very well done. Subscribed!

@TheNewWebDeveloper 7 ай бұрын

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.

@bernardsamapoh3619 7 ай бұрын

Your teaching skills are awesome.

@RM-zj3zb 7 ай бұрын

Thank you very much!

@baster7537 2 күн бұрын

Love it

@oussamamassoudi7209 6 ай бұрын

amazing beginner friendly work

@gangwang9641 9 ай бұрын

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

@afsarzan Жыл бұрын

Thank you for sharing , Lukas.

@lukas.webdev Жыл бұрын

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

@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! 😉

@CodingCompanion-zr6vu 7 ай бұрын

thank u sooo very much sir 🙌🙌

@vikumvirajmanchanayaka3163 Жыл бұрын

straight to the point, best explanation🙌

@lukas.webdev Жыл бұрын

Thank you very much, I really appreciate it! 🤩

@adewaleadisa4346 7 күн бұрын

well done

@dinesh.p8642 Ай бұрын

Dhanyavaad ji.

@fernandoli6743 2 ай бұрын

Thx buddy, nice introduction

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

@CerisPluto 19 күн бұрын

Thanks

@sidiebnou4958 4 ай бұрын

great video.

@user-cf9ys8yp2d 3 ай бұрын

Good information

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

@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! 😉

@Pareshbpatel Ай бұрын

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

@SimonFabcic 7 ай бұрын

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

@shreeramk 9 ай бұрын

Awesomw explanation about tailwind css....

@lukas.webdev 9 ай бұрын

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

@ROVAKAN 2 ай бұрын

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

@olivermgrech 14 күн бұрын

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

@Doc_Jaz 10 ай бұрын

perfect 👍🏻

@lukas.webdev 9 ай бұрын

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

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

@freddyapaka6688 2 ай бұрын

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

@Rashomon69 5 ай бұрын

SUBBED!

@girishanker3796 9 ай бұрын

Gold content 💜

@lukas.webdev 9 ай бұрын

Thanks, I'm glad you it! 😉

@danniellamaedviceda7325 11 ай бұрын

thank you Sir!

@lukas.webdev 11 ай бұрын

You're welcome! 😉

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

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

@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! 🤩

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

@SebastianOnofrei 5 күн бұрын

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

@aberefejiro 10 ай бұрын

Immediately subscribed

@lukas.webdev 9 ай бұрын

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

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

@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!! 🤩

@Sakshamojha15 Жыл бұрын

Nice video ❤

@lukas.webdev Жыл бұрын

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

@shabab3103 11 ай бұрын

Superb man❤

@lukas.webdev 11 ай бұрын

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

@luiseliasrodriguez4327 6 күн бұрын

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

@aamirmir9080 11 ай бұрын

nice

@lukas.webdev 11 ай бұрын

Thanks, I'm happy to hear that! 😉

@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! 😉

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

@hhossen1983 9 ай бұрын

Please make full tutorial about tailwind css❤️

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

@MrDinakdakan 10 ай бұрын

You hair looks good, thanks for the tut

@lukas.webdev 10 ай бұрын

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

@user-ol8jr6kk2y 6 ай бұрын

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

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

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

@CMoDZ3D 6 ай бұрын

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

@navinkumarsahu1159 Жыл бұрын

Awesome video 😊 ❤️ from India

@lukas.webdev Жыл бұрын

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

@ronaldo10m88 8 ай бұрын

very beneficial, make more about videos responsive

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

@mokho3027 9 ай бұрын

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

@georgiosmylonas3892 9 күн бұрын

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

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

@user-vl3fm1be6y Жыл бұрын

I liked

@lukas.webdev Жыл бұрын

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

@alexanderherreramillet87 23 күн бұрын

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

@ajudmeister 9 ай бұрын

subscribed

@lukas.webdev 9 ай бұрын

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

@tafm3446 9 ай бұрын

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

@emadmohamed5787 Жыл бұрын

Nice video Please we need a video for make a clone for KZfaq 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. ✌

@c10ud17 9 ай бұрын

you’re the HOMIE

@lukas.webdev 9 ай бұрын

Thanks buddy, I really appreciate it! 😉

@guptodhan6695 Жыл бұрын

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

@lukas.webdev Жыл бұрын

Thank you very much, 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 ... 😉

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

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

@ravendelarama426 Жыл бұрын

New subscriber here

@lukas.webdev Жыл бұрын

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

@shubhamthaker9380 5 ай бұрын

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

@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 ... 🔥)

@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 4 ай бұрын

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?

@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

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