Tailwind CSS Tutorial for Beginners (2023) - What YOU need to know
Вставка
- Опубліковано 17 чер 2024
- 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.
UA-cam ► 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
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. 😉⬇
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. 😉
@@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)
.
@@ngonidzashesendama2471 Welcome! This really means a lot to me. 🤩
Thanks for this great idea, I’ll think about it ... 😉
excellent Lukas,, looking forward to more!
what do you mean by navigating to a folder?
Thanks so MUCH love the video! dont stop and please dont quit youtube you will have a bright future!!!
This is the best video about tailwind, quick, says important stuff, it works for any framework you are working with, thank you! :)
Great stuff buddy, keep the good work.
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.
Great video mate, straight to the point, useful information 👐
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!
much more helpful than many long articles or tutorials! thanks a lot for this video :D
Thank you. I really appreciate the content. Very concise, yet detailed for starters. 😁
Brilliant, straight to the point!!!
I LOVE THIS!!!! thank you so much 🙂
Concise and clear.
Thank you.
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
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.
Great vid. Appreciate it a ton!
straight to the point, best explanation🙌
Thank you very much, I really appreciate it! 🤩
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.
Sounds like an interesting idea to me! Thanks, I’ll think about it. 😉
@@lukas.webdev This would be great!
THANK YOU SIR, you saved my life!
Very well done. Subscribed!
Thank you ,well explained
Excellent video! Would love to see more about tailwind, especially responsive design
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 ✌
thank u video, u provide a the best helpful tutorial.tailwind.css responsive design is very cool
Thank you! Very useful tutorial!
The best Tailwind CSS tutorial I have found so far. very informative. This channel needs to grow!🙌
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! 😄💪
@@lukas.webdevi smashed the like button, i hate three hour tutorials!
@@mladenkaorlic Thanks, I really appreciate it! 😉
Hey Lukas! New to your channel, very good explanation thanks!
Your teaching skills are awesome.
Thank you for sharing , Lukas.
My pleasure! I’m glad you like it and I appreciate your feedback. 😉
Very concise and easy to follow
It's GOOD for me.Thanks.
This is the best Tailwind CSS video on UA-cam! It's clear, concise, and engaging. Most UA-cam mentors don't have this teaching skill. Thank you so much for sharing your knowledge!
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!
It's the buzzing audio and reverb for me
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.
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... 😉
BTW: The new video is already online... 😉
I liked. But at the end, when I saw, that is worthed to like 😉
Nice work, Lukas...
Very good tutorial, straight to the point, thanks!
My pleasure! I’m glad you like it, thanks for your feedback. 😉
0:48 my man stared into my soul. couldnt't do anything but to like the video
Awesome, I'm happy to hear that my plan worked!! 😄💪
Thanks a lot buddy, I really appreciate it. 😉
Thank you. Amazing video, you're make my day Lukas. You have 1 subcriber more here, keep going bro!!!
My pleasure, buddy! Thank you for your feedback and for the sub, this really means a lot to me. 🤩
Awesome dear Soo gald to see your video
Thank you! I'm glad you like it and I really appreciate your feedback! 😉
amazing beginner friendly work
Thank you very much!
Just subscribed.
Keep up the good work 💐
Will do! Thank you very much, this really means a lot to me! 🤩
thank u sooo very much sir 🙌🙌
Thx buddy, nice introduction
great video.
well done
Dhanyavaad ji.
Non boring , initial push giving tutorial . Thats my taste , sub++
A nice beginners tutorial on TailwindCSS. Thanks.
{2024-05-16} - Subscribed!
Well done. Yes, please include more on mobile-first design with Tailwind. As well as creating custom classes.
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 🤙
BTW: The new video is already online... 😉
@@lukas.webdev I'm on it! Thank you so much for sharing your knowledge and helping others.
@@wadejohnson4542 My pleasure! 😉
This is awesome content bro you saved many hours. So thank you very much!! I became one of your subscriber 🙌
My pleasure, buddy! Thank you so much for your feedback and for the sub, it means the world to me!! 🤩
Awesomw explanation about tailwind css....
I'm glad you like it, thanks for your feedback! 😉
Excellent channel. No idea how you don't have more subscribers.
Thanks, this really means a lot to me! I really appreciate your feedback. 😉
another video with more details on responsive design well be very much helpful
Gold content 💜
Thanks, I'm glad you it! 😉
SUBBED!
Good information
Good Video. Very informational. Appreciate it. Liked and subscribed. (y)
Thanks
Awesome lecture, super concise and clear, and yes you should keep doin React videos. Thanks.
perfect 👍🏻
I'm glad you like it, thanks for your feedback! 😉
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.
Awesome video. Congratulations! I want to know about the "in-production" build (with optimizations) and how apply obfuscation. Thanks!
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.
You are my newest favourite mentor ❤❤ great knowledge, you clear my all doubt.
Thank you! This really means a lot to me. 🤩
I'm glad I could help and I really appreciate your feedback!
@@lukas.webdev😊
thank you Sir!
You're welcome! 😉
Nice video ❤
Thanks for your feedback, I'm happy that you like it! 😉
Nice video ❤❤
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... ✌
Nvm the tutorial. I was blown away with the like button rgb when you mentioned it
Immediately subscribed
Thank you very much, this really means a lot to me! 🤩
nice one waiting for the full vdo on responsive design
Thanks for your feedback. I'm on it 😉
Don't forget to subscribe, to get notified when I drop the video...
BTW: The new video is already online... 😉
Awesome video 😊 ❤️ from India
You're welcome! Thanks for your feedback, I really appreciate it. 😉
Please make more videos using tailwind css . I don't wanna use bootstrap any more.
Thank you it was a great experience 😊 ❤
Thank you so much for your feedback, I'm happy to hear that!
I already have: Next video will be online 1 hour ... 😉
Superb man❤
Thanks buddy, this really means a lot to me! 🤩
Дякую Вам за потрібну мені інформацію ! Thank you so much! Lots of love from Ukraine !
Будь ласка 😉
ABSOLUTELY LOVED THIS TUTORIAL. you wanted to destroy the like button. i also destroyed the follow and notification button as well.
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. 🤔💬💡😀👍🤗 👏📝
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 😉
You hair looks good, thanks for the tut
Finally someone realizes that... 😄
My pleasure, thanks for your feedback! 😉
nice
Thanks, I'm happy to hear that! 😉
very usefull this video, thanks, i like a video for responsive, images, bye
Please make full tutorial about tailwind css❤️
I had to clear the cache of vite: `rm -rf node_modules/.vite` otherwise it wasn't working for some rason.
Great tutorial!
Destroy the like button guys ! Lukas, your call to action was too good 😁
I destroyed the like button but it respawned when I refreshed. Damn those devtools
I liked
Thank you! I really appreciate it and I'm happy that you like it! 😉
very beneficial, make more about
videos responsive
Nice video
Please we need a video for make a clone for UA-cam by tailwind css by your amazing style 😅
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. ✌
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 !!!
I'm from bangladesh,,,,,,you are really genius......
Thank you very much, I really appreciate it! 🤩
subscribed
Thank you very much Andreas, I really appreciate it! 🤩
keep it up my brother . keep uploading...you are on fire 🔥
Thank you so much for your feedback, I really appreciate it!
I'm on it bro! 😉 (Next video will be online 1 hour ... 🔥)
I need responsive device in tailwind, Good lecture
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 ... 😉
you’re the HOMIE
Thanks buddy, I really appreciate it! 😉
A new subscriber here. Can you please make a video about your vscode setting, like theme, cursor etc.
Awesome, welcome! This really means a lot to me. 🤩
Thanks for your request, it's on my list now ... 😉
Please do more videos on Tailwind
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. 😉
BTW: The new video is already online... 😉
New subscriber here
Awesome! Thank you so much, I really appreciate it. 😉
amazing content
how do i get the pointer like you ????? that beeping pointer
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
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
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?
Respectfully, the title makes no mention of the project utilizing specifically "React". This is something that should be mentioned beforehand.
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.
What JavaScript extension generates that right angle between curly brackets?
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.
i cannot customise when i put my own name for the color i want in string and save it goes back to being a normal object and wont let me customise, any help?