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

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

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

what do you mean by navigating to a folder?

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

[@AvaneeshKumarSingh]

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]

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

[@AlbertoRodriguezIII]

@@lukas.webdev This would be great!

[@andrew_mandrichuk]

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

[@user-mr9bz7tr4y]

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

[@Ttozyy]

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

[@FrhankMaduka-lh5vo]

Concise and clear. Thank you.

[@ErsteSkywalker]

Great vid. Appreciate it a ton!

[@carlosm.1233]

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.

[@rheavictor7]

Very good tutorial, straight to the point, thanks!

[@lukas.webdev]

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

[@ritamkayal1153]

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

[@codeakmnru]

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

[@lukas.webdev]

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]

It's the buzzing audio and reverb for me

[@thinkerhuh]

THANK YOU SIR, you saved my life!

[@gangwang9641]

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

[@berakitesfu7008]

Great stuff buddy, keep the good work.

[@markantony9260]

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

[@StephenKarsch]

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!

[@elcontrastador]

Very well done. Subscribed!

[@camilaalbuquerque1371]

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

[@TheNewWebDeveloper]

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]

Your teaching skills are awesome.

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

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

[@lukas.webdev]

@@mladenkaorlic Thanks, I really appreciate it! 😉

[@Ownagin]

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

[@oussamamassoudi7209]

amazing beginner friendly work

[@fernandoli6743]

Thx buddy, nice introduction

[@afsarzan]

Thank you for sharing , Lukas.

[@lukas.webdev]

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

[@vikumvirajmanchanayaka3163]

straight to the point, best explanation🙌

[@lukas.webdev]

Thank you very much, I really appreciate it! 🤩

[@CodingCompanion-zr6vu]

thank u sooo very much sir 🙌🙌

[@joeyx4056]

Very concise and easy to follow

[@sachinthaprasad1388]

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

[@lukas.webdev]

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

[@Jefferrey1]

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

[@lukas.webdev]

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 ✌

[@Doc_Jaz]

perfect 👍🏻

[@lukas.webdev]

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

[@RM-zj3zb]

Thank you very much!

[@SimonFabcic]

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

[@DCWang-dk2gn]

It's GOOD for me.Thanks.

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

[@Romulan1993]

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

[@lukas.webdev]

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

[@AvaneeshKumarSingh]

Just subscribed. Keep up the good work 💐

[@lukas.webdev]

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

[@hhossen1983]

Please make full tutorial about tailwind css❤️

[@Rashomon69]

SUBBED!

[@aberefejiro]

Immediately subscribed

[@lukas.webdev]

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

[@user-cf9ys8yp2d]

Good information

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

[@fernando19801980]

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

[@lukas.webdev]

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.

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

[@shreeramk]

Awesomw explanation about tailwind css....

[@lukas.webdev]

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

[@MrDinakdakan]

You hair looks good, thanks for the tut

[@lukas.webdev]

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

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

[@girishanker3796]

Gold content 💜

[@lukas.webdev]

Thanks, I'm glad you it! 😉

[@sidiebnou4958]

great video.

[@danniellamaedviceda7325]

thank you Sir!

[@lukas.webdev]

You're welcome! 😉

[@zuzukouzina-original]

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.

[@freddyapaka6688]

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

[@ROVAKAN]

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

[@ronaldo10m88]

very beneficial, make more about videos responsive

[@nishagera9195]

Thanks

[@lukas.webdev]

My pleasure! 😉

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

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

​@@lukas.webdev😊

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

[@shabab3103]

Superb man❤

[@lukas.webdev]

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

[@iriam7380]

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

[@ajudmeister]

subscribed

[@lukas.webdev]

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

[@andreask.291]

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]

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 😉

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

[@PulseSyncGames]

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

[@emadmohamed5787]

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

[@Avengers-shorts205]

Nice video ❤

[@lukas.webdev]

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

[@user-ol8jr6kk2y]

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

[@tafm3446]

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

[@mokho3027]

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

[@aamirmir9080]

nice

[@lukas.webdev]

Thanks, I'm happy to hear that! 😉

[@yuriyzadorozhnyi3849]

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

[@lukas.webdev]

Будь ласка 😉

[@shubhamthaker9380]

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

[@gabrielchima6916]

I need responsive device in tailwind, Good lecture

[@lukas.webdev]

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

[@navinkumarsahu1159]

Awesome video 😊 ❤️ from India

[@lukas.webdev]

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

[@feggy585]

What JavaScript extension generates that right angle between curly brackets?

[@lukas.webdev]

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.

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

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

[@c10ud17]

you’re the HOMIE

[@lukas.webdev]

Thanks buddy, I really appreciate it! 😉

[@programmingjobesch7291]

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.

[@rosemarvelous3781]

Can tailwind be used together with the normal css

[@lukas.webdev]

Yes, and in the "Customization" chapter of this video I explain how you can do 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 ... 🔥)

[@sidhoward]

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

[@user-vl3fm1be6y]

I liked

[@lukas.webdev]

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

[@danylohromyak5228]

Guys, I'm currently learning React, and I don't know what to learn next: Tailwind or Material UI? And which of them is in higher demand now?

[@lukas.webdev]

I would recommend you to learn Tailwind, because the demand is generally higher and IMO it's just more customizable and powerful. 😉 (PS: and with this tutorial you can learn Tailwind in no time - so give it a try and even if you end up using Material UI, you hardly lost any time ...)

[@danylohromyak5228]

@@lukas.webdev I tried tailwind yesterday, and it’s sooo easy. But when I was learning MUI, my head almost exploded lol. Idk maybe I should try to use an unstyled MUI with a tailwind, but is there a point in using an unstyled UI kit?

[@lukas.webdev]

@@danylohromyak5228 Yeah, Tailwind is definitely easier to learn than MUI ... but if you want to learn it, you just have to keep going and give it some time. 😉 (But before you use an unstyled MUI with Tailwind, I would recommend you to use Tailwind on its own...)

[@guptodhan6695]

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

[@lukas.webdev]

Thank you very much, I really appreciate it! 🤩

[@godwinoyale3550]

Is it compulsory to learn javascript and reactJs before learning Tailwind?

[@lukas.webdev]

No, it's not. As long as you understand at least the basics of CSS, you’re technically ready for Tailwind. 😉

[@jackanderson300]

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?

[@HyperionBadger]

Respectfully, the title makes no mention of the project utilizing specifically "React". This is something that should be mentioned beforehand.

[@ravendelarama426]

New subscriber here

[@lukas.webdev]

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

[@klirmio21]

I still did not get why would I use @layer instead if just writing a .custom-class and applying it to an element?

[@lukas.webdev]

Apologies for the delayed response! It's the easiest approach to just write a custom class, but the recommended and more powerful approach is to add your own styles directly into the relevant layer and there are a few reasons for that: E.g. any custom styles you add to Tailwind with the @layer directive will automatically support Tailwind’s modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more. Additionally if you add your Custom CSS by using @layer it will only be included in your compiled CSS if those styles are actually used in your HTML. (So if you want to add some custom CSS that should always be included, add it to your Stylesheet without using the @layer directive) Also, the order of the rules in your Stylesheet decides which declaration wins when two selectors have the same specificity and the @layer directive lets you control the final declaration order while still organizing your actual code in whatever way you like. There are a few more reasons - but that would be too much and too complex for the comment section... maybe I'll do a separate video about it. Hope this was helpful. 😉

[@klirmio21]

@@lukas.webdev thank you!

[@lalosalamanca139]

tailwind project

[@SamHartmannCom]

15:30 wouldn't you rather extend the theme?!

[@jared0801]

Hovering over the class name to reveal the definition isn't working for me, any ideas?

[@amysugar]

I dunno, I was following step-by-step but Tailwind never worked for me. My app.jsx file doesn't see my app.css file

[@MrJorjantas]

This video teaches you how to fish in tailwind lake

[@proteus1]

I have input.css

[@monkaSisLife]

Little Criticism, if i look up Tailwind, i want to know about tailwind. using React with it is not really a good tutorial

[@3pcgi959]

Nö, ist mir zu kompliziert. Aber trotzdem danke für die übersicht.

[@lukas.webdev]

Gerne, danke für dein Feedback. 😉

[@sidhoward]

im confused of the wording. looks like the entire project has two names "cd youtube" and "tailwind-project". Remember this tutorial is for idiots like me, helps to explain why you are doing each command vs the awkward silence between each frame lol