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) .
This is the best Tailwind CSS video on RUclips! It's clear, concise, and engaging. Most RUclips mentors don't have this teaching skill. Thank you so much for sharing your knowledge!
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! 😄💪
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
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.
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.
I've been skipping this video for so long, now that I've watched it I feel stupid for not watching it sooner. I'm glad I did, although a bit late. Thanks Lukas for your clear explanation.
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. 🤔💬💡😀👍🤗 👏📝
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!
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. ✌
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... 😉
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.
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?
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.
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?
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.
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. 😉
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
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 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 🤙
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 !!!
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
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 ...)
@@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?
@@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...)
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?
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. 😉
This is the best Tailwind CSS video on RUclips! It's clear, concise, and engaging. Most RUclips 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
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! 😉
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
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!
much more helpful than many long articles or tutorials! thanks a lot for this video :D
straight to the point, best explanation🙌
Thank you very much, I really appreciate it! 🤩
Excellent channel. No idea how you don't have more subscribers.
Thanks, this really means a lot to me! I really appreciate your feedback. 😉
Glad i found this teacher will like to see more tailwind and react lessons.
like magic. He said i will wait . i liked the video and then he thank me wow🙂
Amazing way of teaching 🎉🎉
Great stuff buddy, keep the good work.
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.
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 ... 😉
Now this is it
Very clear ❤
I've been skipping this video for so long, now that I've watched it I feel stupid for not watching it sooner. I'm glad I did, although a bit late. Thanks Lukas for your clear explanation.
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 😉
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!
Very useful tutorial content, special thanks for your tutorials. Very simple and clear in teaching. Keep going
Nice video
Please we need a video for make a clone for RUclips 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. ✌
a responsive design on tailwind css will be very much appreciated
I liked. But at the end, when I saw, that is worthed to like 😉
Nice work, Lukas...
Great video! Keep up the good work!
Super helpful
Awesomw explanation about tailwind css....
I'm glad you like it, thanks for your feedback! 😉
Non boring , initial push giving tutorial . Thats my taste , sub++
Thank you so much!
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... ✌
Your teaching skills are awesome.
Gold content 💜
Thanks, I'm glad you it! 😉
Thanks so MUCH love the video! dont stop and please dont quit youtube you will have a bright future!!!
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.
A nice beginners tutorial on TailwindCSS. Thanks.
{2024-05-16} - Subscribed!
Awesome lecture, super concise and clear, and yes you should keep doin React videos. Thanks.
Nice video ❤
Thanks for your feedback, I'm happy that you like it! 😉
another video with more details on responsive design well be very much helpful
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 had to clear the cache of vite: `rm -rf node_modules/.vite` otherwise it wasn't working for some rason.
Great tutorial!
Immediately subscribed
Thank you very much, this really means a lot to me! 🤩
Thank you! Very useful tutorial!
Hey Lukas! New to your channel, very good explanation thanks!
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 ... 🔥)
Superb man❤
Thanks buddy, this really means a lot to me! 🤩
Awesome video. thank you!
Concise and clear.
Thank you.
Thanks
Very well done. Subscribed!
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.
I LOVE THIS!!!! thank you so much 🙂
perfect 👍🏻
I'm glad you like it, thanks for your feedback! 😉
Thank you ,well explained
thank you Sir!
You're welcome! 😉
Great vid. Appreciate it a ton!
Nvm the tutorial. I was blown away with the like button rgb when you mentioned it
Thx buddy, nice introduction
thank u sooo very much sir 🙌🙌
well done
amazing content
how do i get the pointer like you ????? that beeping pointer
very beneficial, make more about
videos responsive
I liked
Thank you! I really appreciate it and I'm happy that you like it! 😉
Destroy the like button guys ! Lukas, your call to action was too good 😁
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?
SUBBED!
Please reply me with the link to responsive design with tailwind css
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.
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?
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.
Hovering over the class name to reveal the definition isn't working for me, any ideas?
I still did not get why would I use @layer instead if just writing a .custom-class and applying it to an element?
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. 😉
@@lukas.webdev thank you!
Young Xabi Alonso
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
This video teaches you how to fish in tailwind lake
you make card class and make css ,is that responsive?anyone?
I still dont understand why use tailwind instead of just basic css
Lmao 😂
Nö, ist mir zu kompliziert.
Aber trotzdem danke für die übersicht.
Gerne, danke für dein Feedback. 😉
Brown George Walker John Jones Christopher
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
teilwvind 🤮
Thank you for your constructive feedback. 😉
@@lukas.webdev 🤣you are welcome
why don't you create new tutorials?
Love it
Little Criticism, if i look up Tailwind, i want to know about tailwind. using React with it is not really a good tutorial
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. 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.
Can tailwind be used together with the normal css
Yes, and in the "Customization" chapter of this video I explain how you can do it... 😉
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
subscribed
Thank you very much Andreas, I really appreciate it! 🤩
Respectfully, the title makes no mention of the project utilizing specifically "React". This is something that should be mentioned beforehand.
Does tailwind support blazor server?
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 ... 😉
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! 😉
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 !!!
Awesome video 😊 ❤️ from India
You're welcome! Thanks for your feedback, I really appreciate it. 😉
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
nice
Thanks, I'm happy to hear that! 😉
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?
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 ...)
@@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?
@@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...)
very usefull this video, thanks, i like a video for responsive, images, bye
I will have to watch it again, couldn't get the usefulness of this....
Polite, To the Point , Awesome Guide ! You Helped me bro !