Thank you so much Raddy All of the Tailwind tuto out there is out of date and hard to follow. Yours one is the best and updated one for me. Keep it up 🔥
This is amazing, thank you so much. Until now I've been using SCSS to build my knowledge of HTML and CSS and shortcutting stuff with nesting, etc, but learning this stuff makes me feel like I'm progressing beyond the dark ages. Super useful framework, super helpful tutorial!!!
Subscribed to your channel. Great video. You are the only one who has followed commands exactly as per the documentation given on the tailwindcss website. This is great for beginners to understand. Thank you.
Thank you for the crash course! I'm starting to see how great Tailwind is and I'm glad you showed us the Intellisense extension as it shows what classes are actually being applied. Your tutorial was easy to follow, wow!!
I am from a non-English speaking country and I am not good at English, but your explanation is easy and understandable enough. I got a lot of help from your lecture. Thank you.
So i started to look into some css frameworks to replaced what i used in the past, before my hiatus due to burnout. Today i decided to take a look at tailwind. I watched some short videos explaining its paradigms and it interested me a lot, so i wanted to watch a tutorial, and here i am. i think I'll settle for tailwind but I'll be honest and say that the unstyled default feature is a bit off-putting for me, even if i intend to use it with Vue. thank you for the tutorial!
thank you so much!! really love the way you explain a thing, btw can you make crash course about tailwind headless ui? hope your channel grow bigger soon , cheers
I definitely had too much caffeine on this one. What do you think of TaiwindCSS? I think that it was unfair to bring up the accessibility as TaiwindCSS is not a prototyping tool like Bootstrap.
@@pidaras1 I've cut down on caffeine. As much as I like the taste of coffee it does makes me anxious. I just looked into L-theanine and it looks pretty good. Thanks for the suggestion
First of all, great tutorial :) Question for you or anyone if possible... as you mentioned, in the output.css if you scroll to the bottom it will show you the utility classes you've actually used in your index.html. Why is it that is also seems to keep a history of what you've used? Example here when I changed the header text size using text-9xl and went back to the output.css, I noticed text-9xl was there now but also that text-3xl was still there despite it no longer being used in my index.html file. Is that normal and if so why wouldn't it be removed? It could also just not matter lol Thanks again!
I remember looking into this and I believe that it was something to do with caching. It's totally normal and the classes will be purged. You could try to stop watching for changes and do a start the process again and that should remove them. At the end you can optimise for production by doing: ' npx tailwindcss -o build.css --minify ' and that should should do the truck
Very good. I think maybe a very slight tad slower on your presentations. I think about a couple of seconds extra in your presentation should be fine. Go back and listen to yourself carefully. This is just a suggestion, I hope it helps. Looking for the next one. Thank you!
I think that the main difference is that with Tailwind you can make your website look however you like. This is a PRO and a con in a way as with Material UI, the design is kind of already done for you so it could save you time. You have a good accessible and interactive framework that you don't have to worry too much about. Also as far as I remember Material Ui comes with all the JavaScript that you need for interacting with components. On Tailwind you have to do all the JS interaction yourself. Things like Hamburger menu, sliders, input interaction and so on. I guess both are great in their own way
when I follow along with you, my project immediately gets package.json, package-lock.json, and a folder called node_modules. I also don't see a rebuild in the terminal when I save changes made.
similarly on the container div when I applied border-2 it is not working. Is there any issue with my setup? initially all things like bg color and text color working fine
You have to save in order for the page to reload. I think that it looks at file changes and then refreshes your browser. Sometimes it takes a second longer to generate the CSS and the page has already been refreshed therefore not showing the changes. I battled that by setting my live server to auto-save and I also manually saved. It seems to work for me
I've done everything correctly but styles aren't applying smh😔.... When I add classes to the h1 it creates those classes in output.css but they're not working
It sounds like the 'output.css' file isn't linked. If you followed along you need to have href="/dist/output.css" Make sure that your output file is in that folder and it should work
@@sinno2861 I dunno if I am right about this guess since I just started using tailwind. But when I saw the link in url, I feel like the src should be "../dist/output.css" since you need to go back 1 folder to go to the dist folder since index.html is at the src folder.
@@Cyrus_G actually the problem was that I use php for backend so I was using XAMPP but tailwind doesn't work with XAMPP. So I think I'll have to use javascript instead of php now. Cuz I can't make them work together. Couldn't find a way to do so
Nice Tutorial, Can you show how to work with tailwind and SCSS without gulp or webpack? Is it possible to create project like that (SCSS and tailwind) ? :)
Thank you! You can use the CDN link and literally start using it without any of the CLI commands. I could do my next tutorial on using CDN. I need to think about it
@@RaddyDev Yes, I worked like that but problem is with size of CDN file (it's around 4MB). I use Tailwind with CLI cuz I can render only this classes what I use. What it's really awesome (file size = 20KB - 30KB). But I can't find how to work with SASS and Tailwind without gulp or weback.
![[LIVE] : ONE ลุมพินี 83 วันนี้!! คู่เอก "พันฤทธิ์ vs ซุปเปอร์บอล วันของโอม MBK"](http://i.ytimg.com/vi/1b4pkKHa_Fk/mqdefault.jpg)
I was comfortable with doing CSS the old way until I ran into a problem in a large scale project. Now I’m very glad tailwind exist.
Thank you so much Raddy All of the Tailwind tuto out there is out of date and hard to follow. Yours one is the best and updated one for me. Keep it up 🔥
Thank you, Shaun! I appreciate your comment! 🔥🔥🔥
Excellent Raddy, thank you for this. I have been searching around for a start up tutorial and this is the best I have found. 🦍
Glad that you found it helpful, Alanl! Thanks for the comment 👊🦍
This is amazing, thank you so much. Until now I've been using SCSS to build my knowledge of HTML and CSS and shortcutting stuff with nesting, etc, but learning this stuff makes me feel like I'm progressing beyond the dark ages. Super useful framework, super helpful tutorial!!!
Such an amazing Crash Course. Straight to point, no bullshit and all the basics learned in 30 minutes. Thanks!
Thanks Nick!
Absolutely great tutorial, clear, simple couldn't be better, thank you very much
Glad you liked it!
Subscribed to your channel. Great video. You are the only one who has followed commands exactly as per the documentation given on the tailwindcss website. This is great for beginners to understand. Thank you.
Awesome, thank you!
Great video, thanks for all. It is absolutely best praxis for tailwind.
I am glad that you liked it!
Thank you for the crash course! I'm starting to see how great Tailwind is and I'm glad you showed us the Intellisense extension as it shows what classes are actually being applied. Your tutorial was easy to follow, wow!!
Yeah the extension defiantly makes things much better. Glad that you found the tutorial easy to follow. Thanks for the comment, Chian!
ty so much. spent too long looking at outdated tutorials.
I hope that you found it useful and thank you for watching
Wow great tutorial
Advance tailwind covered
Great tutorial, all the basics done quickly and easy to understand
Thank you for the comment!
Highly informative. Good job!
Need more videos like this :)
Thanks, Rajat! I appreciate your comment
I am from a non-English speaking country and I am not good at English, but your explanation is easy and understandable enough. I got a lot of help from your lecture. Thank you.
I am glad that you found it easy to understand. Thank you for the nice comment!
Best Tailwind Css course. Thank You.
Wow, thanks! I appreciate that!
Great Video, Keep going Raddy 👍
Thanks, Ahmed! I appreciate it 👊😎
Keep going Raddy. Clean, simple and nicely explained tutorial. well done...
Thank you! I appreciate your comment
Wow, this is Amazing. Thank you so much Raddy. This made the fear of Tailwind CSS in me vanish. Thanks for making it easy to understand.
Glad to hear that you liked the video! Thank you for the nice comment
You Hero!! Thanks Raddy🤗
Thanks for the tutorial, was quick and concise but informative. So few good ones on tailwind 3.
Thank you, I am glad that you found it useful
Thank you for creating this tutorial
Thanks, Mohammad! 👊😎
Thank you for the detailed tutorials! Subscribed!
Glad that you like the tutorials. Thank you for the sub!
nice and short, to the point, thank you.
Well explained as always. Will help a lot in my next project.
Great to hear!
Thank you for the intro, well done explained !
Great teaching
So i started to look into some css frameworks to replaced what i used in the past, before my hiatus due to burnout. Today i decided to take a look at tailwind. I watched some short videos explaining its paradigms and it interested me a lot, so i wanted to watch a tutorial, and here i am. i think I'll settle for tailwind but I'll be honest and say that the unstyled default feature is a bit off-putting for me, even if i intend to use it with Vue.
thank you for the tutorial!
Thanks for this.
thank you so much!! really love the way you explain a thing, btw can you make crash course about tailwind headless ui? hope your channel grow bigger soon , cheers
thank you for your excellent job!
Thanks for watching!
Great course, you just earned another subscriber!
Thank you! I appreciate you being here
Hey! Thanks for the video. I was looking for one like this.
I wish you had covered the process of building up, but it's ok!
I totally forgot about it. It would have literally taken me a second to do. You can do 'npx tailwindcss -o build.css --minify' to minify it
@@RaddyDev Thanks for taking the time, man!
Really appreciated!
Keep up the good work!
Top quality Crash Course! Thank you.
Thank you!
Thank you so much, amazing course!
Really good tutorial.
You get a new subscriber here.
Thank you! 👊😉
Fantastic tutorial
Kudos
Thank you!
I definitely had too much caffeine on this one. What do you think of TaiwindCSS? I think that it was unfair to bring up the accessibility as TaiwindCSS is not a prototyping tool like Bootstrap.
It's cool currently making a static site using 11ty not sure whether to use bootstrap or tailwind. May use tailwind for the first time, bored of bs
Try take caffeine with L-theanine
@@pidaras1 I've cut down on caffeine. As much as I like the taste of coffee it does makes me anxious. I just looked into L-theanine and it looks pretty good. Thanks for the suggestion
Great Job!
Thank you! Cheers!
Awesome video! Thanks so much
👊😎
THANK YOU SO MUCH!
Excelent tutorial, keep doing like so.
Thanks, Luis. I appreciate your comment
This crash course is perfect
I am glad that you like it, Muhammad!
It can be written classes after @apply as inline, no need to add @apply for each class.
Thank u so much! ❤
really informative. thnx
Glad that you found it informative! Thanks for the comment, Keddy!
man thanks very usefulll
Super bro clear explanation
Thank you! 🙂
First of all, great tutorial :) Question for you or anyone if possible... as you mentioned, in the output.css if you scroll to the bottom it will show you the utility classes you've actually used in your index.html. Why is it that is also seems to keep a history of what you've used? Example here when I changed the header text size using text-9xl and went back to the output.css, I noticed text-9xl was there now but also that text-3xl was still there despite it no longer being used in my index.html file. Is that normal and if so why wouldn't it be removed? It could also just not matter lol Thanks again!
Ignore my question, I figured it out :)
I remember looking into this and I believe that it was something to do with caching. It's totally normal and the classes will be purged. You could try to stop watching for changes and do a start the process again and that should remove them. At the end you can optimise for production by doing: ' npx tailwindcss -o build.css --minify ' and that should should do the truck
@@SClassTDOT ah i just seen this :-D
Very good. I think maybe a very slight tad slower on your presentations. I think about a couple of seconds extra in your presentation should be fine. Go back and listen to yourself carefully. This is just a suggestion, I hope it helps. Looking for the next one. Thank you!
What do you guys think between tailwind vs Material Ui, especially in term of performances and which one worth learning it
I think that the main difference is that with Tailwind you can make your website look however you like. This is a PRO and a con in a way as with Material UI, the design is kind of already done for you so it could save you time. You have a good accessible and interactive framework that you don't have to worry too much about. Also as far as I remember Material Ui comes with all the JavaScript that you need for interacting with components. On Tailwind you have to do all the JS interaction yourself. Things like Hamburger menu, sliders, input interaction and so on. I guess both are great in their own way
This is nice crash course
thank u
Thanks for this wonderful lesson. With love from Russia🇷🇺
Glad that you like it and thank you for watching, friend!
when I follow along with you, my project immediately gets package.json, package-lock.json, and a folder called node_modules. I also don't see a rebuild in the terminal when I save changes made.
That's a little bit strange. But it works? Sometimes my terminal bugs and I have to cancel the process and re-do it. Maybe that's whats happening
I liked the concise version of your tutorial 🙌 . But I am facing issue it is not reflecting on refreshing the page 😟
similarly on the container div when I applied border-2 it is not working. Is there any issue with my setup? initially all things like bg color and text color working fine
@@dhananjaymehrotra1988 change the input CSS to output CSS again by running npx tailwind and it will work bro!!!
Thank you
Thanks 🥰
Thank you for watching Zfter!
❤️
❤️❤️❤️
Is there another script i can import into the html file instead of using the cdn from tailwind?
You have to save in order for the page to reload. I think that it looks at file changes and then refreshes your browser.
Sometimes it takes a second longer to generate the CSS and the page has already been refreshed therefore not showing the changes. I battled that by setting my live server to auto-save and I also manually saved. It seems to work for me
I changed a color it’s showing in the bs code but don’t reflect in the website please help
Are your styles linked? Check to see if you get the styles compiled, open it and see if the color is in there.
I tried all these and yet doesn’t reflect on my chrome browser
Check to see if your .css file has been generated and also make sure that when you link your CSS you have the correct path
@@RaddyDev the path was the problem, figured it out myself the double dots it just skipped my mind
Glad that you figured it out
I've done everything correctly but styles aren't applying smh😔.... When I add classes to the h1 it creates those classes in output.css but they're not working
It sounds like the 'output.css' file isn't linked. If you followed along you need to have href="/dist/output.css"
Make sure that your output file is in that folder and it should work
@@RaddyDev it is linked but still ain't working. It gets updated as well when I add classes to a tag but smh it's not working
Try terminating the build and then run dev again. Maybe do the same for live server. Basically restart the process
@@sinno2861 I dunno if I am right about this guess since I just started using tailwind. But when I saw the link in url, I feel like the src should be "../dist/output.css" since you need to go back 1 folder to go to the dist folder since index.html is at the src folder.
@@Cyrus_G actually the problem was that I use php for backend so I was using XAMPP but tailwind doesn't work with XAMPP. So I think I'll have to use javascript instead of php now. Cuz I can't make them work together. Couldn't find a way to do so
Nice Tutorial, Can you show how to work with tailwind and SCSS without gulp or webpack? Is it possible to create project like that (SCSS and tailwind) ? :)
Thank you! You can use the CDN link and literally start using it without any of the CLI commands. I could do my next tutorial on using CDN. I need to think about it
@@RaddyDev Yes, I worked like that but problem is with size of CDN file (it's around 4MB). I use Tailwind with CLI cuz I can render only this classes what I use. What it's really awesome (file size = 20KB - 30KB).
But I can't find how to work with SASS and Tailwind without gulp or weback.
My question is should I learn it 😌😌
Learn it. You might end up liking the utility based approach and it's easy to get started.
🦍