@@ferozahmad4988 yes because now he is full time software engineer in a reputed software house. This software house stop him to post their videos because its against their rules and regulations.But I think its not the real matter .I think some big names like udemy , coursera , edx etc stop bucky because bucky free courses are much much better than their paid courses😥
FINALLY someone who shows how to not have 20 classes attached to the flippen div, I was about to give up on tailwind because those classes all inline looks messy to me.
I swear, these last few videos you’ve been reading my mind. “I need a good crash course on this”. Hey, look, a crash course a day later! Keep it up man!
00:00:00 DevMountain Promotion 00:00:20 Tailwind intro, comparision with other component based frameworks 00:01:55 Tailwind Utility First intro referring to official doc 00:02:45 Tailwind Setup 00:05:50 index.html creation 00:06:35 Start using Tailwind utilities - Background color 00:09:05 Container, margin, padding class usage 00:10:25 Config file usage 00:12:20 Extend Utility Classes 00:14:30 Margin, Padding info 00:15:20 Height, Width info 00:16:00 Flexbox info, warning about not learning Tailwind after learning HTML 00:17:05 Alert component 00:20:05 Card component 00:24:20 ".too too tooh tooh" By Brad while pasting code. Card Columns component ( Responsive Design, new utility classes intro ) 00:27:55 Navbar component ( ".too too tooh tooh" By Brad during this video )
Thanks a lot, man. I've been meaning to take a look at tailwind for a while, but all the tutorial I'd come across so far was either too beginner level or too unclear, like they put stuff there and didn't explain anything. Yours was spot on! Keep it up bro.
Thanks a lot Brad, I learned a lot from your videos.. I am from Afghanistan and your free videos helped me a lot to learn web design and also the path way to be a developer.. Know I am learning front end development..
Started working with Tailwind today and absolutely loved it! Although there are just too many classes; it felt overwhelming. You do a great job highlighting the important parts. Kudos!
Hey! Just wanted to let everyone know that the build:css command line script he provides here is out of date. You need to use: *tailwind build -i src/style.css -o dist/style.css* Of course changing the paths to your source/distribution stylesheets respectively. If you use the one given here, Tailwind will use a blank style.css that *won't include your changes* (such as at 13:00) where he explains @apply directives. Stay woke!!
I watched this video five years ago, and I'm here in 2024 to say, thanks Brad, I really appreciate you. You've always been there since I started my Web Development journey, from HTML, CSS, Javascript, Tailwind CSS, and React. I'm currently using Next JS with Typescript. Thank you homie. I appreciate you.🙂
I've been kind of out of the loop with web dev stuff for almost a decade now. I've been wanting to get back into it, but I find it daunting how much stuff has changed and all the new stuff. After messing around with tailwind, I am actually excited to get back into this as opposed to overwhelmed. At least when it comes to the front-end stuff. Still gotta figure out what's the cool way of doing the backend. This is a nice guide to getting going on tailwind. Thanks.
Thank you Brad for all your great content. Working through all your courses on Udemy. You push out great regular content on UA-cam, hence me searching for you on Udemy. Extremely appreciated by all your loyal fanbase.
Tailwind is really cool, I like the idea of having utility classes to build my components the way I want, gives me more control over the UI and I don't have to be reseting bunch of css styles like with bootstrap
I love tailwind css. It's also great for tweaking in the browser inspection tool just throwing in different classes until your 100% satisfied. Also for production when you add purge css it will give you a super lean css file > 10kb 🙌
If anyone is having problems do this: npx tailwindcss init inside of the tailwind.config.js, add ./(folder your html is in)/*.{html,js} run this: npx tailwindcss-cli -i src/style.css -o ./dist/output.css (change th -o and -i paths to yours!) now you add to your html (change /dist/output.css to your directory)
Thanks you so much Brad! You are awesome man! one year ago you taught me React and I got the Internship, which in 3 months I converted into a Job, and I am back here for Tailwind. Keep up the amazing work.
First time I saw one of your videos and it's great. Took the mystery out of tailwind. I knew tailwind is one of the best choices, but now I understand WHY tailwind is one of the best choices (especially if you are working solo and not on a team). Thanks for this Tut, and I will be watching and liking more of your stuff. Thanks
Just a heads up for new people watching this video like me - the video is outdated and is not updated to be helpful without going through the comments and looking up the issues. Find a newer video or go to the documentation for a better guide.
Great timing, thank you for the video! I didn't know this framework exists until I saw your video but it is exactly what I need for my project. Never liked the opinionated approach of Bootstrap although I started using it for prototyping lately.
I think it's useful only if you're building only in front-end but if you're a backend developer I can already see plenty of problems in my point of view with messy code. Looks cool and handy, but this is like including a file separately from html tags and css tags... Looks useful... But for front-end developers, definitely interested to hear about future updates of TailwindCSS though.
Yeah I agree, this is for the lazy web-devs that didn't want to sit down a weekend to properly learn CSS. But even with tailwind they will struggle, because it uses the same terms as the CSS standard and I don't see any real benefit of using this over pure CSS.
I'm still new to tailwind, but my first impression is that I truly hate it. Few things. 1) The setup is minor but more annoying, other libs don't require configuring. 2) It makes the code hideous and unreadable when the styling gets more complex. 3) The biggest offense by far: you have to re-learn CSS to map it to tailwind's version of each property. 4) Sometimes you need to go in and fine-tune values, but tailwind doesn't support stepping outside of the pre-set theme values.
When I was about to learn bootstrap, I thought it was exactly what tailwind is where you can type whatever in the class and it dynamically change. I was very disappointing to learn it didn't do that. I've been watching tailwind development on twitter and finally am learning it now. This looks amazing
Brad. You have a gift to show how create many cool stuff in very easy way. Ofcourse it's very true that the knowledge about css is fundamental. Guys don't forget about this. Thanks a lot for youre work i'm apprieciated
This tutorial is no less than epic, HUGE Thanks for creating it. But as for TailwindCSS…, damn, can't fathom having to remember ALL those utility classes. TailwindCSS is basically an accepted framework for "classitis", so many complaints about that and here we are, a CSS framework that actually IS based on that 🤦♂️.
There is some golden mean to it. Lot of good utilities, esp. around responsiveness and the ecosystem, unopinionated, configurable, but hey - these individual classes in html - maccabre! Tailwind has gained a bit more of the hype than it deserved.
Daniel Casas Angular is JavaScript framework. Tailwind is a css utility library. Completely different use cases / nothing like one another. You could of course use them together though.
I don't know if I should feel dumb but it wasn't until this video I learned about emmet abbreviations! 🤩 so excited to use those. And Tailwind looks good, I think we'll be using it at our company 👍
Cheers Brad. Looks fast and more custom than Bootstrap, though the structural and presentation layers kind of get mish mashed. Good for fast prototyping at least.
An update to the course, create an index.html inside the /src folder, otherwise, the classes won't be exported bc tailwindcss makes purge of css classes that it doesn't filds inside the src folder
You didn't tell us we needed to already know how to use VSC, JS etc. I'm fairly new to coding and considering a career change. I'd like a VS code breakdown please.
Brad Traversy + Bucky Roberts +Gary Simons + Net ninja + Academind +Mosh Hamedani == *No need of college/universities*
Kindly mention other's channel name bro. Thanks
@haris bashir thank you bro
Bucky Roberts stopped posting new videos...Do you know why??
@@ferozahmad4988 yes because now he is full time software engineer in a reputed software house. This software house stop him to post their videos because its against their rules and regulations.But I think its not the real matter .I think some big names like udemy , coursera , edx etc stop bucky because bucky free courses are much much better than their paid courses😥
Don't forget Derek Banas also
FINALLY someone who shows how to not have 20 classes attached to the flippen div, I was about to give up on tailwind because those classes all inline looks messy to me.
IT IS JUST PHENOMINAL: WHATEVER I SEARCH FOR, BRAD, BRAD, BRAD AND BRAD HAS ALWAYS GOT ME COVERED !!
Thanks Brad for this video! I was just going to dive into using Tailwind CSS for a project and you've made it easier for me to learn it!
You look like Brad
@@wobsoriano yes XD
@@wobsoriano lol
@@wobsoriano Lol HAHAHAHAHHA
I started learning tailwind css just today. And here it is. Thanks, Brad. I've learned a lot from you.
Best tutorial of tailwind. I am writing this while watching the video. That is how good it is
I swear, these last few videos you’ve been reading my mind. “I need a good crash course on this”. Hey, look, a crash course a day later! Keep it up man!
Another great free video. Makes being a patron entirely worthwhile.
00:00:00 DevMountain Promotion
00:00:20 Tailwind intro, comparision with other component based frameworks
00:01:55 Tailwind Utility First intro referring to official doc
00:02:45 Tailwind Setup
00:05:50 index.html creation
00:06:35 Start using Tailwind utilities - Background color
00:09:05 Container, margin, padding class usage
00:10:25 Config file usage
00:12:20 Extend Utility Classes
00:14:30 Margin, Padding info
00:15:20 Height, Width info
00:16:00 Flexbox info, warning about not learning Tailwind after learning HTML
00:17:05 Alert component
00:20:05 Card component
00:24:20 ".too too tooh tooh" By Brad while pasting code. Card Columns component ( Responsive Design, new utility classes intro )
00:27:55 Navbar component ( ".too too tooh tooh" By Brad during this video )
I swear you have a crash course for everything. You are truly a blessing to people looking to learn web development.
Thanks a lot, man. I've been meaning to take a look at tailwind for a while, but all the tutorial I'd come across so far was either too beginner level or too unclear, like they put stuff there and didn't explain anything. Yours was spot on! Keep it up bro.
If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉
Thanks a lot Brad, I learned a lot from your videos.. I am from Afghanistan and your free videos helped me a lot to learn web design and also the path way to be a developer.. Know I am learning front end development..
Started working with Tailwind today and absolutely loved it! Although there are just too many classes; it felt overwhelming. You do a great job highlighting the important parts. Kudos!
Hey! Just wanted to let everyone know that the build:css command line script he provides here is out of date. You need to use:
*tailwind build -i src/style.css -o dist/style.css*
Of course changing the paths to your source/distribution stylesheets respectively. If you use the one given here, Tailwind will use a blank style.css that *won't include your changes* (such as at 13:00) where he explains @apply directives.
Stay woke!!
I was looking for this for whole day. Thanks a lot, mate.
thank you so much !
I LOVE YOU
an update to this! i had to use npx tailwindcss build -i src/style.css -o dist/style.css
@@mikez3307 helped me so much for my work, tnq!
Man, I learned something new for every lesson I watch on your channel. thanks, Brad.
This Framework is amazing, I think to learn more about it.
Ive been coding three months, and this is seriously the coolest thing I’ve seen yet!!! Seriously, im mad i’m just now deciding to learn Tailwind
I watched this video five years ago, and I'm here in 2024 to say, thanks Brad, I really appreciate you. You've always been there since I started my Web Development journey, from HTML, CSS, Javascript, Tailwind CSS, and React. I'm currently using Next JS with Typescript. Thank you homie. I appreciate you.🙂
13:52 "...and never mind these errors, it's just that VSCode doesn't know what the hell's going on..." 😂😂😂😂😂love it
I needed a quick rundown of Tailwind. This was just what I needed. Thank you!
I've been kind of out of the loop with web dev stuff for almost a decade now. I've been wanting to get back into it, but I find it daunting how much stuff has changed and all the new stuff. After messing around with tailwind, I am actually excited to get back into this as opposed to overwhelmed. At least when it comes to the front-end stuff. Still gotta figure out what's the cool way of doing the backend.
This is a nice guide to getting going on tailwind. Thanks.
if you are having problems getting the script to build try updating node and also include autoprefixer in the dependencies that helped me.
Dude, I've been wanting to create something exactly like this in the past. I actually really needed something like tailwind. Great video, Brad!
Thank you Brad for all your great content. Working through all your courses on Udemy. You push out great regular content on UA-cam, hence me searching for you on Udemy. Extremely appreciated by all your loyal fanbase.
A gist of Tailwind in such a simpler way. Loved it.
🙂A good teacher is always knows what the actual need of his student. I appreciate your effert dear!
One of my dreams is meet you in the real life. MY_BEST_TEACHER. Thank you Brad
Tailwind is really cool, I like the idea of having utility classes to build my components the way I want, gives me more control over the UI and I don't have to be reseting bunch of css styles like with bootstrap
Yes! 💯
Exactly what I was looking for. A quick demo of setup and use of Tailwind CSS. Thank you.
Finally! I've been waiting forever for this tutorial~ thanks Brad
Thank you so much Brad!!! I am a Software Engineer because of your tutorials!
Awesome!
Thanks for such a simple yet informative video, it helped me get a good idea overview on tailwind css
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... maybe this is helpful for you as well ... 😉
I follow a lot of web devs / academies channels, you are the best by far. Keep going in your way. Thanks you dude!
Thank you so much for explaining Tailwind CSS in such a simple and beautiful way.😇
appreciated , but anyone coming new here, most the syntactical stuff has been updated so kindly go through docs if struggling
I just posted a Tailwind CSS Tutorial (in 2023) - This should help... 😉
Hey, I Got This Recommendation Two Years Later and Really, Found This useful 👍👍❤️
I love tailwind css. It's also great for tweaking in the browser inspection tool just throwing in different classes until your 100% satisfied. Also for production when you add purge css it will give you a super lean css file > 10kb 🙌
I was looking for this and you just delivered this in time. Thank you. You are the best.
most helpful tutorial ever. thank you
If anyone is having problems do this:
npx tailwindcss init
inside of the tailwind.config.js, add ./(folder your html is in)/*.{html,js}
run this: npx tailwindcss-cli -i src/style.css -o ./dist/output.css (change th -o and -i paths to yours!)
now you add
to your html (change /dist/output.css to your directory)
thankyou bro, just one mistake it should be output.css instead of index.html
@@nikhilbabar2226 oh! Thank you for letting me know this!
Thanks you so much Brad! You are awesome man! one year ago you taught me React and I got the Internship, which in 3 months I converted into a Job, and I am back here for Tailwind. Keep up the amazing work.
Awesome story! 😉
Brad, you're a diamond amongst the rough. Thank you!
First time I saw one of your videos and it's great. Took the mystery out of tailwind. I knew tailwind is one of the best choices, but now I understand WHY tailwind is one of the best choices (especially if you are working solo and not on a team). Thanks for this Tut, and I will be watching and liking more of your stuff. Thanks
I have heard alot about tailwind CSS and this really gives an awesome idea of how it works...
Awesome crash course, Brad. Definitely using this in my next project.
Great tutorial, thanks Brad for your contribution to the web dev community.
Sweet! Basically once that you have HTML & CSS covered, the frameworks are easier to understand! Thank you Brad :)
Brad is a heavyweight React developer, I actually gave you thanks by buying your udemy course, thanks Brad!
Just a heads up for new people watching this video like me - the video is outdated and is not updated to be helpful without going through the comments and looking up the issues. Find a newer video or go to the documentation for a better guide.
Thanks for the heads up! I just posted a Tailwind CSS Tutorial (2023) ... 😉
you're right, im having trouble configuring the setting, this video is too outdated
@@gedeanggayogaprastawa968 I posted a Tailwind CSS Tutorial (2023) 4 weeks ago ... 😉
Haven't heard a lot about Tailwind, but it looks like something to think about. Thanks Brad
Excellent look at Tailwind.
There is power of understanding in your voice. many thanks
been patiently waiting for this Crash Course
Thank you for your tutorials. You have been an inspiration in my web dev journey.
Great timing, thank you for the video! I didn't know this framework exists until I saw your video but it is exactly what I need for my project. Never liked the opinionated approach of Bootstrap although I started using it for prototyping lately.
Thanks for the video. I've been meaning to read up on Tailwind. This was exactly what I needed.
I think it's useful only if you're building only in front-end but if you're a backend developer I can already see plenty of problems in my point of view with messy code. Looks cool and handy, but this is like including a file separately from html tags and css tags... Looks useful... But for front-end developers, definitely interested to hear about future updates of TailwindCSS though.
Yeah I agree, this is for the lazy web-devs that didn't want to sit down a weekend to properly learn CSS. But even with tailwind they will struggle, because it uses the same terms as the CSS standard and I don't see any real benefit of using this over pure CSS.
@@GuitarreroDaniel no you need to know how css fully works before being able to understand how tailwind works.
I'm still new to tailwind, but my first impression is that I truly hate it. Few things. 1) The setup is minor but more annoying, other libs don't require configuring. 2) It makes the code hideous and unreadable when the styling gets more complex. 3) The biggest offense by far: you have to re-learn CSS to map it to tailwind's version of each property. 4) Sometimes you need to go in and fine-tune values, but tailwind doesn't support stepping outside of the pre-set theme values.
please make the updated 2022 taiwind crash course plzzz
If you want a more up to date video: I just posted a Tailwind CSS Tutorial (2023) - maybe this is helpful ... 😉
When I was about to learn bootstrap, I thought it was exactly what tailwind is where you can type whatever in the class and it dynamically change. I was very disappointing to learn it didn't do that. I've been watching tailwind development on twitter and finally am learning it now. This looks amazing
This is way cooler than I thought it was
Brad. You have a gift to show how create many cool stuff in very easy way. Ofcourse it's very true that the knowledge about css is fundamental. Guys don't forget about this. Thanks a lot for youre work i'm apprieciated
thanks brad, cant wait to build my first navbaaah with tailwind
Amazing tailwind css tutorial helped me a lot, simple and clean explanation !
Excellent introduction to Tailwind CSS. Thanks.
Thanks for the tutorial Brad, I learned a lot! A lot of people swear by Tailwind, but I don't see any real benefit over pure CSS or Styled Components.
Thanks Brad. Awesome as always!
I was just trying out Tailwind yesterday and.. this video came. Thank you, Brad!!
This tutorial is no less than epic, HUGE Thanks for creating it.
But as for TailwindCSS…, damn, can't fathom having to remember ALL those utility classes.
TailwindCSS is basically an accepted framework for "classitis", so many complaints about that and here we are, a CSS framework that actually IS based on that 🤦♂️.
There is some golden mean to it. Lot of good utilities, esp. around responsiveness and the ecosystem, unopinionated, configurable, but hey - these individual classes in html - maccabre! Tailwind has gained a bit more of the hype than it deserved.
The first 5 minutes was so smooth I take it all in without stress! 💯🥰🇵🇭
Brad is the man.
A great intro and also a refresher. Thanks for another enjoyable course!!
God bless you abundantly Brad, you have been a blessing
Love the way you do ... tu tutu tuut. Great video mate.
Great tutorial. 5 stars. As of 8/2021, it looks like Tailwind no longer has text-teal by default, so either add it, or pick something else.
Thank you so much Brad. An incredibly well explained video. Absolutely amazing. Very grateful. Thank you !
This is a very good overview thank you for this and your passion
Thanks professor, u r great!!
Nice video. Newbie to webdev and was checking out angular, tailwind looks more like my fit
Daniel Casas Angular is JavaScript framework. Tailwind is a css utility library. Completely different use cases / nothing like one another. You could of course use them together though.
I don't know if I should feel dumb but it wasn't until this video I learned about emmet abbreviations! 🤩 so excited to use those.
And Tailwind looks good, I think we'll be using it at our company 👍
Always the best timing! Love this Brad, really appreciate your works!
Seems like a step backwards. Next, we'll go full circle and start doing style="margin: 0 0 4px 0; display: -webkit-box; max-height: 3.2rem; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem;"
Cool! This video is so much helpful.
I also just posted a Tailwind CSS Tutorial (for Beginners in 2023) ... maybe this is even more helpful ... 😉
Smooth. Calm. Soothing Voice Informative. Brad
Awesome as always. You are a valuable resource
Cheers Brad. Looks fast and more custom than Bootstrap, though the structural and presentation layers kind of get mish mashed. Good for fast prototyping at least.
I'm learning Tailwind. thanks for the video
A great course on Tailwind CSS...
Thank you for this crash course
An update to the course, create an index.html inside the /src folder, otherwise, the classes won't be exported bc tailwindcss makes purge of css classes that it doesn't filds inside the src folder
He makes that "çuççuçuçu" voice and I love it :D
For each component to write all these classes is counter productive
Thanks, Brad! Very convincing. We will use TailwindCSS for our upcoming project.
Awesome tutorial as usual
Thanks man, now i know where to start😅
Fantastic! Thanks for making this!
Wow, this was a really great overview. Thanks.
You didn't tell us we needed to already know how to use VSC, JS etc. I'm fairly new to coding and considering a career change. I'd like a VS code breakdown please.
This was a really great crash course. Thank you
Great stuff as usual, Brad! Thanks!