Tailwind CSS Crash Course

[@heelercs]

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!

[@slimyelow]

IT IS JUST PHENOMINAL: WHATEVER I SEARCH FOR, BRAD, BRAD, BRAD AND BRAD HAS ALWAYS GOT ME COVERED !!

[@jmonterojr]

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!

[@wobsoriano]

You look like Brad

[@aniskarim1934]

@@wobsoriano yes XD

[@dev-charmer]

@@wobsoriano lol

[@shernillelicud2645]

@@wobsoriano Lol HAHAHAHAHHA

[@sfrlisfrov7075]

I started learning tailwind css just today. And here it is. Thanks, Brad. I've learned a lot from you.

[@problemchild959]

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.

[@harisbashir933]

Brad Traversy + Bucky Roberts +Gary Simons + Net ninja + Academind +Mosh Hamedani == *No need of college/universities*

[@abbassher201]

Kindly mention other's channel name bro. Thanks

[@abbassher201]

@haris bashir thank you bro

[@ferozahmad4988]

Bucky Roberts stopped posting new videos...Do you know why??

[@harisbashir933]

@@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😥

[@arwahsapi]

Don't forget Derek Banas also

[@stephenjames2951]

Another great free video. Makes being a patron entirely worthwhile.

[@JorgeCorradi]

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.

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@Exenima]

I swear you have a crash course for everything. You are truly a blessing to people looking to learn web development.

[@albertchung7641]

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!

[@shahrketab9803]

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

[@mugishasolomonbekunda]

Best tutorial of tailwind. I am writing this while watching the video. That is how good it is

[@morgan24TH]

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

[@gratien25]

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.

[@vikramingleshwar5732]

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 )

[@jesusestevez5665]

I follow a lot of web devs / academies channels, you are the best by far. Keep going in your way. Thanks you dude!

[@orincywhytedesigns]

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

[@warhunta]

Thank you Brad for all your great content. Working through all your courses on Udemy. You push out great regular content on KZbin, hence me searching for you on Udemy. Extremely appreciated by all your loyal fanbase.

[@MrHumanwarrior]

Dude, I've been wanting to create something exactly like this in the past. I actually really needed something like tailwind. Great video, Brad!

[@merthyr1831]

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

[@HamzaKhan-qm5bl]

I was looking for this for whole day. Thanks a lot, mate.

[@neeshnoo]

thank you so much !

[@olliejw8192]

I LOVE YOU

[@mikez3307]

an update to this! i had to use npx tailwindcss build -i src/style.css -o dist/style.css

[@matkomilic8382]

@@mikez3307 helped me so much for my work, tnq!

[@aniskarim1934]

One of my dreams is meet you in the real life. MY_BEST_TEACHER. Thank you Brad

[@ducanhtran8929]

Finally! I've been waiting forever for this tutorial~ thanks Brad

[@Chris-Christopher-]

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.

[@hasancanboga9808]

I needed a quick rundown of Tailwind. This was just what I needed. Thank you!

[@hriteekbista5540]

I was looking for this and you just delivered this in time. Thank you. You are the best.

[@illuzual]

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 🙌

[@easy_ev]

if you are having problems getting the script to build try updating node and also include autoprefixer in the dependencies that helped me.

[@yahayaoyinkansola8258]

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

[@lukas.webdev]

Yes! 💯

[@imperativeemarketing5546]

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

[@resident__]

Thank you so much Brad!!! I am a Software Engineer because of your tutorials!

[@lukas.webdev]

Awesome!

[@danielnadar75]

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.

[@lukas.webdev]

Awesome story! 😉

[@mohamedathif968]

most helpful tutorial ever. thank you

[@irinadelgado876]

Sweet! Basically once that you have HTML & CSS covered, the frameworks are easier to understand! Thank you Brad :)

[@ronniesunshine1163]

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

[@shubhamvora6250]

Thanks for such a simple yet informative video, it helped me get a good idea overview on tailwind css

[@lukas.webdev]

I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... maybe this is helpful for you as well ... 😉

[@eatrejosm]

Brad is a heavyweight React developer, I actually gave you thanks by buying your udemy course, thanks Brad!

[@Stratopeter87]

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.

[@HugoArceo]

Exactly what I was looking for. A quick demo of setup and use of Tailwind CSS. Thank you.

[@sarahmattar]

13:52 "...and never mind these errors, it's just that VSCode doesn't know what the hell's going on..." 😂😂😂😂😂love it

[@bernhardsmuts2265]

I have heard alot about tailwind CSS and this really gives an awesome idea of how it works...

[@Webtricker]

Thank you so much for explaining Tailwind CSS in such a simple and beautiful way.😇

[@muhammadinshal2742]

🙂A good teacher is always knows what the actual need of his student. I appreciate your effert dear!

[@asmitdaschoudhury1866]

Hey, I Got This Recommendation Two Years Later and Really, Found This useful 👍👍❤️

[@Shakeel714]

Great tutorial, thanks Brad for your contribution to the web dev community.

[@sufyanabbada6702]

A gist of Tailwind in such a simpler way. Loved it.

[@Jason-bg7jc]

Awesome crash course, Brad. Definitely using this in my next project.

[@GuitarreroDaniel]

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.

[@KylePrinsloo]

Haven't heard a lot about Tailwind, but it looks like something to think about. Thanks Brad

[@Heymantas]

I was just trying out Tailwind yesterday and.. this video came. Thank you, Brad!!

[@karapatrick610]

Thanks for the video. I've been meaning to read up on Tailwind. This was exactly what I needed.

[@Cocinaconparrilla]

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.

[@GuitarreroDaniel]

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.

[@RealHomeboy]

@@GuitarreroDaniel no you need to know how css fully works before being able to understand how tailwind works.

[@AtifShafiinheritance]

appreciated , but anyone coming new here, most the syntactical stuff has been updated so kindly go through docs if struggling

[@lukas.webdev]

I just posted a Tailwind CSS Tutorial (in 2023) - This should help... 😉

[@przemysawziegert5035]

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

[@hooiyan6040]

Always the best timing! Love this Brad, really appreciate your works!

[@robertcoffie8789]

been patiently waiting for this Crash Course

[@creativedaz]

The first 5 minutes was so smooth I take it all in without stress! 💯🥰🇵🇭

[@ChrisFotosMusic]

thanks brad, cant wait to build my first navbaaah with tailwind

[@hemilmehta6455]

Amazing tailwind css tutorial helped me a lot, simple and clean explanation !

[@digigoliath]

A great intro and also a refresher. Thanks for another enjoyable course!!

[@carolinec8084]

Brad, you're a diamond amongst the rough. Thank you!

[@toberixng]

There is power of understanding in your voice. many thanks

[@lullalullafy]

Thank you so much Brad. An incredibly well explained video. Absolutely amazing. Very grateful. Thank you !

[@faithmusa4418]

Thank you for your tutorials. You have been an inspiration in my web dev journey.

[@Fitzpa14]

This is way cooler than I thought it was

[@RicardoZea]

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 🤦‍♂️.

[@shubhambattoo5166]

Love the way you do ... tu tutu tuut. Great video mate.

[@SocksWithSandals]

Excellent look at Tailwind.

[@tttylerrr00]

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)

[@nikhilbabar2226]

thankyou bro, just one mistake it should be output.css instead of index.html

[@tttylerrr00]

@@nikhilbabar2226 oh! Thank you for letting me know this!

[@jeribullitt2432]

Excellent as always. Thanks Brad 👍

[@NeverCodeAlone]

This is a very good overview thank you for this and your passion

[@73xld]

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 👍

[@bodhicougar]

Thanks, Brad! Very convincing. We will use TailwindCSS for our upcoming project.

[@redrambles]

Great stuff as usual, Brad! Thanks!

[@SilvestreVivo]

Thanks Brad for the tutorial. I think this combines really well with SvelteJS. It would be nice a tutorial for that.

[@TheCocoaDaddy]

"This is not a crutch".... you, Sir, are awesome. Great video!!!!!! I'll definitely take a closer look at Tailwind CSS. Thanks for posting this video! Also, your voice sounds like Giovanni Ribisi from the movie "Boiler Room". :)

[@RichardDoesYouTube]

Awesome as always. You are a valuable resource

[@MrCatOwner]

Nice video. Newbie to webdev and was checking out angular, tailwind looks more like my fit

[@alexsmith-rs6zq]

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.

[@aram5642]

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.

[@buildwithgenai]

please make the updated 2022 taiwind crash course plzzz

[@lukas.webdev]

If you want a more up to date video: I just posted a Tailwind CSS Tutorial (2023) - maybe this is helpful ... 😉

[@davidwaller2179]

Excellent introduction to Tailwind CSS. Thanks.

[@naimurhasanrwd]

Cool! This video is so much helpful.

[@lukas.webdev]

I also just posted a Tailwind CSS Tutorial (for Beginners in 2023) ... maybe this is even more helpful ... 😉

[@KainGNX]

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.

[@somang2401]

This was a really great crash course. Thank you

[@bnuggg]

I could have used this 30 days ago lol. I had to learn all of this the hard way, on a client's dime ;)

[@marfomaxwell3809]

God bless you abundantly Brad, you have been a blessing

[@mattslack3380]

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.

[@renangaldino6538]

Thanks professor, u r great!!

[@fxnoob]

I'm learning Tailwind. thanks for the video

[@georgesmith3022]

For each component to write all these classes is counter productive

[@codingwithdidem]

He makes that "çuççuçuçu" voice and I love it :D

[@geoffdc123]

Awesome tutorial as usual

[@RickBeacham]

Great information! Love your videos!

[@exclusiven940]

Smooth. Calm. Soothing Voice Informative. Brad

[@noberto_brown8549]

Thanks man, now i know where to start😅

[@lordswaggity1213]

Brad is the man.

[@cswalker21]

Wow, this was a really great overview. Thanks.

[@QBolgi]

Awesome tutorial ! I don't really understand the cool thing about Tailwind alone. But you have to check out the TailwindUI which bring very modern design. I think I'll use this framework with their UI thing.

[@bruce.vanzyl]

Fantastic! Thanks for making this!

[@VadimBesedin]

Thank you! Nice and clear as always!

[@tetteishahday-annang3120]

Just in time! 💙