Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours

[@DaveGrayTeachesCode]

A 45 second intro followed by 3 hours of code and instruction for Tailwind CSS. I bookmarked all 5 chapters in the description. If you complete one lesson per day, you'll complete the full course in just 1 week. Join my Discord server for discussion and to ask questions: discord.gg/neKghyefqh

[@joshc2368]

Thanks Dave

[@DaveGrayTeachesCode]

@@bitsolve3229 Join my Discord linked in the description. I check there often.

[@HLS6935]

Thanks!!

[@TerenceSawtellCA]

This tutorial is the ultimate is re-learning a skillset I had a hard time rekindling for years.

[@eshw23]

This is by far the best framework to write CSS, omg it is so simple and easy and makes your websites look unique however you want to style it, and the mobile responsiveness is effortless!

[@DaveGrayTeachesCode]

Glad you like it! 💯

[@lukas.webdev]

Yes, 100% 😉

[@xyo2434]

The amount of DETAIL that you put into your explanations is what is missing from any other video I have ever watched. Every curiosity that I had whilst looking at what you did has been answered. Thank you so much.

[@DaveGrayTeachesCode]

Glad I could help!

[@dennisenoakpokihoke3523]

Swears ❤

[@ToumaRenshi]

I have been watching already for 20 minutes and definitely I am in love with your video. Your videos about HTML, CSS and other videos are the best I have ever seen. You deserve to have a lot of subs and I think everyone who wants to start programming should learn from you. I will recommend everyone about your awesome tutorials. I have no words to describe more here. It's just awesome, amazing, and dope. Thank you so much. Greeting from Poland. I am on my way to becoming a frontend. :)

[@DaveGrayTeachesCode]

Thank you for the kind words and hello 👋 to Poland!

[@archeron3004]

Was already giving up on my web development journey and I stumbled upon your tutorials thanks man really helped alot

[@DaveGrayTeachesCode]

Glad I could help!

[@Cozzy2]

I’m still in this boat, looking for the light at the end of the tunnel

[@djsjoerd7330]

if smooth-scroll is not working on windows 10, check the windows settings > ease of access > show windows animations. cheers :) and thank you Dave Gray for this great tutorial.

[@Coding_Gurus]

The one of the best person ever in the whole world to teach Web development for free. Appreciate your efforts. Really you are helping thousands of people.

[@LucasGiraldelli]

At 9:25, you don't need to deactivate that, just into your user/settings.json add "files.associations": { ... // other file associations "*.css": "tailwindcss" } note: I think you'll need tailwindcss extension shown in 15:24

[@zombiefacesupreme]

You're the man, Dave! I'm already using Tailwind, but I'm gonna let this play in the background to help your metrics and see if you have any little tips for me. I'm at the point where I'm chanting along with you "much like the chapters of a book".

[@DaveGrayTeachesCode]

Ha! Glad I may still provide a few tips and thank you for the support!

[@MubashirullahD]

Your tutorials are coming out just in time when I need them :) Whats great is how I can listen at 1.5x speed and your speech is crystal clear. In fact, its got a nice rhythm, I could keep on going. 🚀🚀

[@DaveGrayTeachesCode]

Great to hear! My previous classroom experience (and way back in the day I worked in radio, too) must be helping with my clarity. Thank you for the feedback!

[@ibadullah-ve3ef]

Thank you so much Dave. Such a great tutorial! Basics to customizing themes. I was looking for it. Thanks, Dave. Your tutorial helps a lot.

[@michelemoneywell8765]

To install the Prettier Plug-in, in case you don't want to rewind to catch it: npm install -D prettier prettier-plugin-tailwindcss To run: npm run prettier Fix any errors it finds. I had an extra , one at the end of a paragraph and one on a new line. Then rerun. (It will update your index.html file. Check your "pretterier" script in your package.json for the correct file path before running.)

[@derivadadekonoha]

Dave, I'd like to thank you so much for spending your time teaching us in this easy and complete way, not just with this Tailwind's course, but with all your other courses. Hope to see more content from you soon. All the best to you.

[@nullzero9224]

Hi Dave , A correction for a class name @ 1:52:45 - The class name should be justify-center NOT justify-content-center. I have issued a PR on github to correct it. Thanks once again for this excellent course.

[@DaveGrayTeachesCode]

Seems like a good catch! I'll check it out. 🚀

[@nullzero9224]

@@DaveGrayTeachesCode Thank you Dave so much. I feel happy as this is the first time I got PR merged. You made my day 😃

[@arsamhashempour8156]

there few persons I admire them for one their abilities and you are one of them, for vibe and anything

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@RajithWijepura]

One of the best tailwind tutorials out there on the internet. Thank you very much.

[@anoir1115]

As a beginner, I would like to see the class being applied to a element one-by-one to see its effect instead of typing 10+ styles as once then the job is done and continue to the next element. Yes, I can always test the style myself or check them in website... but what is the point of it? Typing all as once isn't much faster. Tailwind intelliSense can't help and cause a lot of typing mistakes.

[@DaveGrayTeachesCode]

I understand the request. It would have made this tutorial series much slower if I had done so. The series is not about learning CSS - which is a prerequisite for the course - but rather just learning Tailwind CSS and how to apply it. But again, I do understand the reason for your request.

[@toufiquebelim4403]

Dave Gray - My best teacher for web development

[@DaveGrayTeachesCode]

Thank you!

[@andreidublas7229]

i admit that i like your teaching style dave you made my life easier in learning this kind of thing i share my experience about watching your closure tutorial in javascript, we all know that closure is somthing that its hard to learn but because of dave i finally understand how it works thank you dave!!!

[@DaveGrayTeachesCode]

Glad to hear that!

[@aungkhantbwaralexander1541]

I love your tutorial, this is amazing. You not only explain very clearly about what you are doing also you show how a real life developer would set up the project. Thanks for your amazing work.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@MilanParmar.]

thanks for having me on your amazing content

[@hefalump56]

Really great video tutorial. Thank you Dave. After two days working through your tutorial I now have a great base to build upon and familiarity with using Tailwind. I had no previous experience with Tailwindcss, just vanilla CSS without frameworks.

[@yuheckel75]

Thank you Dave for the great work. This is the best tutorial I found in learning Tailwindcss.

[@DaveGrayTeachesCode]

Glad to hear that! You're welcome!

[@HassanJawedWani]

Congratulation myself for completing this 3 hours long tailwind CSS tutuorial

[@bors1n]

I would like to say thank you for this course. Especially I like your way of explaining stuff it's very clear and understandable even for non english native people (as I am). Thanks.

[@nullzero9224]

Thank you so much Dave. You are a great instructor who adds a real value with every video. I like how verbose you are sometimes so you present the materials crystal clear for users specially beginners like me. Keep up the good work and best of luck

[@DaveGrayTeachesCode]

You're very welcome!

[@TheFaheemiQuasar]

Thanks Dave , amazing course , so much in-depth and the way you explained the config file , input css file and use of extends , layers and custom css is just amazing

[@abdullahfarhat3148]

Greetings from Egypt I understood every word, it's like you was speaking in Arabic 😅 I just meant that you really good to clearify everything Thank you Mr.Dave

[@DaveGrayTeachesCode]

Glad to hear that and hello 👋 to Egypt!

[@Not-that-true]

i must say that this course is very helpful and should be promoted by KZbin algorithms since it it well informative and beginner friendly. Good deed worth reward

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@SonicFictionTV]

Great! I had been hesitant to use Tailwind for some time, but your video has sparked my enthusiasm for it.

[@DaveGrayTeachesCode]

Glad to hear that!

[@Netpilation]

2:10:54 you deserve a 10% of my first salaray i learned alot from you

[@fourkyx]

super usefull and clear ! Thank you Dave!

[@maneshwam]

Ok. if you already an expert in css then this course is for you or else don't waste time, first learn the basics of css and dive into this tutorial. Thanks

[@Salah-YT]

thank u ever so much bro I've done it and I try to complete ur typescript video as well so thank u and hope u have a great life

[@DaveGrayTeachesCode]

Thanks, you too!

[@Salah-YT]

@@DaveGrayTeachesCode u welcome bro

[@abdullahsiam7609]

Your tutorials are simply the best...

[@DaveGrayTeachesCode]

Glad you like them!

[@dev02048]

The best tutorial on the internet

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@3R-room]

thanks you dave for this tutorial,I love it so much

[@SieUngWong]

very good tutorial (bookmark: 1:05:00)

[@offgridvince]

Wow, cool! How does this work without npm i tailwindcss?

[@collinsmacharia-pg9xw]

i am a begginer never thought coding will drain you this much i have learnt only css html and tailwind so far

[@lukas.webdev]

Don't give up! Especially the beginning is always hard... You've got this 😉💪 I post very beginner friendly video about these topics on my channel - maybe they can help you as well ...

[@KojoJohnson]

Do a little a day, compound effort my friend......when its all said and done you will be amazed at how far uve come. I used to feel just like you.

[@iamsahtohan4141]

How’s it for you now? It’s been over a year since u made this comment I hope it got better 💕

[@collinsmacharia-pg9xw]

@@iamsahtohan4141 dedication pays thats what i can say .....are you on linkedin we connect

[@collinsmacharia-pg9xw]

@@KojoJohnson are you on linkedin we connect

[@BarretStewart-oe4os]

If come across a course,that comes from Dave Gray i know that course is perfect 🎉🎉🎉🎉 ❤❤❤

[@FEDOKHAR]

This is a great tutorial, thanks a lot Dave

[@DaveGrayTeachesCode]

Glad you liked it!

[@Michael-tf3hj]

Good day, Dave! I appreciate the way you teach us various aspects of web dev and all of your tutorials seem pretty much straight forward and concise. Getting to the point, I've seen a lot of projects made by using three.js and they seem breathtaking; so are there any chances we gonna have some three.js tutorials here? Thanks a lot for your videos Dave! Have a nice day!

[@renatolins4670]

Hey Dave, have you tried Styled components? For me, Styled components change web development completely but not all developers seem to have noticed that. See, we will not just have the power of Javascript to style (using JS syntax), but we can map every UI element to a component (just like what happens with Flutter)... so, if everything is a component, then it is easy to find, update, reuse, pack as a library and..... if everything is a component, then everything can be tested. While taking this 'component-first' approach, it feels to me that we are no longer creating 'documents' with web technology, but actual system UI modules, e.g: a button with an 'isTextBold' property can hide/abstract all CSS into the component itself, we don't have to worry about style while reusing that same component. Another thing is: With a set of battle-tested UI components, we will be 'assembling' screens in a LEGO-like approach, which can be incredibly productive. Please, let me know what you think, I'm intending to use Styled components for everything

[@DaveGrayTeachesCode]

Yes, nice approach!

[@keyBladeSkai]

The king just dropped this🤌🏿🔥

[@DaveGrayTeachesCode]

You are too kind - thank you!

[@عبداللهمحمدصادق-ف1ر]

1:43:00 May I ask why you create widescreen and tallsceeen while all screens are actually 3/2 or 1/2 aspect ratio, why you don’t just directly put section-min-height class?

[@wisekid7488]

When you see its Dave.. You gonna know the best of tailwindcss video is coming to you. Thank you again Dave 👌👌 Can we request a typescript video next. You doing great job helping self-taught programming learners. All Blessings to you and family 🙏

[@DaveGrayTeachesCode]

Thank you! You can request TS and I can suggest the TS series I recently started: kzbin.info/www/bejne/g4CyZqmoqbmIiqc I hope it helps! 💯🚀

[@wisekid7488]

@@DaveGrayTeachesCode That's great Dave! I'll still wait for the full course in 1 video, like you always do. I get better grasp that way! Thanks for the effort you put in though 🙏

[@AllNaturale11]

Another note. If you're on mac and press control + command + space then you can get emojis that way as well.

[@starsandsoul]

Great series. Helped me ramp up on Tailwind fast. Thank you for creating this.

[@DreadArsenol]

Dave is just built different actually has infinite knowledge on everything

[@DaveGrayTeachesCode]

Ha! Thank you! There are many things I do not know - but I try to learn a little more every day. 💯🚀

[@yacinetouati2378]

great tutorial, thanks dave !

[@DaveGrayTeachesCode]

Thank you!

[@suleymansentosun4478]

I expected you would have focused on just Tailwind css topic and haven't made a practical tutorial. At least you could have informed us in the title about that!

[@inteliconn995]

You make the world a better place. Thanks again!

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@LeonelLopezBorbon]

You are a wonderful teacher teaching us a great Taindwicss tutorial!!

[@arthurb6132]

You are the first Dave it's now that I find there I can learn tailwind cs 🎉

[@DaveGrayTeachesCode]

Glad to hear that!

[@AsifDawood]

Thank you for the video. It was great learning from you

[@leonardmbibi8013]

Dave I got stuck at the 11th minute when styles were applied to the body element. It did not reflect when I launched live server. Watched the video over and over again, deleted the files, started all over but no luck. I set background-color and some other properties and they reflected but the ones involving dimensions failed. I started trying different values but was getting some successes and failures. I went to documentation eventually - and found out beyond 12, increments are in multiples of 4. I was initially using h-54, w-54 just like css that I knew - It was a lot of stress. Now I can go back and continue. Thanks!

[@Winnerboyce]

Thank you so much Dave, you’ve really been helpful in my journey.

[@mateusgodoy5060]

Sir, your videos are awesome! Thank you for sharing all this high quality knowledge with us!

[@Caariin88]

Great tutorial! Thanks

[@donnieyang7453]

Thank you, Dave, your tutorials are excellent!

[@DaveGrayTeachesCode]

Glad you like them!

[@okonkwo.ify18]

I had to come here to rewatch this video. Am getting to see its immense usefulness

[@DaveGrayTeachesCode]

Right on! 🚀

[@ibrahimolayiwola3605]

Thank you so much for giving me the opportunity to deploy my first website. I really love your video

[@DaveGrayTeachesCode]

Glad it was helpful!

[@poojagarva]

Such a great tutorial! Basics to customizing themes. I was looking for it. Thanks, Dave. Your tutorial helps a lot.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@michelemoneywell8765]

How do you spell relief? I got to just before the 2 1/2 hour mark, and my hamburger animation wasn't working! I checked and triple checked everything. I was disappointed and frustrated, but I was not going to give up. Then I decided to use the VS Code "Problems" feature. It is the first choice in the Terminal window if that makes sense. I had the index.html in the editor window, hit Problems, and voila! It told me that I had typed the same class twice in one section. It even told me the line number! It might have been scroll-mt-20 in #rockets-- I don't recall. The class name stated twice was seen as a conflict that could not be resolved. I erased the duplicate, rebuilt the output css file, and voila, it works! And it is way cool to see the 720 degree spin! Bottom line-- check the Problems feature in the bottom (in my layout window of VSCode, where the terminal is) and see if that helps. And for what it's worth, it doesn't hurt to occasionally check as you work.

[@davidmtobias]

Thank you very much for the tutorial. Very useful and the perfect intro to Tailwindcss. I like very much the way you teach.

[@DaveGrayTeachesCode]

You're very welcome!

[@albiummid]

Finally got it! Thank you ❤❤

[@DaveGrayTeachesCode]

You're welcome!

[@AsishKumarBehera-l8p]

1:40:00 custom tailwind

[@tamalchakraborty6355]

"If you ignore your problem, then there is no problem" - Dave Gray ( On his mind. during 9:30 )

[@DaveGrayTeachesCode]

No. What I said was it is not a problem at all. It is just something about Tailwind that the CSS linter does not understand.

[@tamalchakraborty6355]

@@DaveGrayTeachesCode I'm really sorry Dave. I actually didn't mean it, was just kidding. I'm sorry again. 😅

[@fabrice9848]

@12:00 Why do we need to recompile the css? We made no changes to input.css, we only modified our html file.

[@DaveGrayTeachesCode]

Tailwind reads the classes in your html file. Then it compiles the CSS based on those classes.

[@CTILET]

Oo you have a tailwind! Amazing

[@AhmedAbdElAziz500]

Hello Mr. Gray, I'm confused at this point 40:36 Isn't the icon supposed to be hidden when it reaches the sm breakpoint and be visible again in md, lg, and other containers? What I want to say is that isn't the behavior supposed to be the opposite of what is happening?

[@adhurimgashi3071]

2:27:46 I did everything like in the tutorial, but the X is not appearing what might be the reason?

[@brightideatechnology]

This is so lovely and explanatory. ❤❤

[@e-sportsorganization8082]

Absolutely Fantastic!

[@ycheing]

very good tutorial, i had clealy know how to use tailwind thanks for great tutorial, hopefully you can have another more deep tutorial for us,

[@michelemoneywell8765]

Haven't started the rocket project yet. How would you add a button to the page so that the user can switch between dark and light mode without changing her/his settings?

[@marvii13]

Always teaches us best practices ..Thanks a lot sir! 🥰

[@codewithnadeem]

in this tutorial we also learning about responsive desgin?

[@DaveGrayTeachesCode]

Anything other than learning Tailwind CSS here is secondary. I recommended understanding CSS before this course. Please refer to the CSS course on my channel for responsive design and all things CSS.

[@entrinsek9230]

I started the video ! If i will be able to make a website with tailwind i will pay you for helping me

[@DaveGrayTeachesCode]

You've got this!

[@魔法師-m7n]

非常棒的课程，谢谢。

[@yuriisytnyk393]

Dave thank you some much this series helps me to dive into Tailwind and I learned a lot from it

[@DaveGrayTeachesCode]

Glad to hear that!

[@CoolBot369]

My vs code not making another file in build folder by giving npx command

[@laurapeterson146]

Thanks for the tutorial. Is this tutorial using the new Tailwind 3 ?

[@DaveGrayTeachesCode]

Yes

[@binukbe4401]

Hello Gary Thanks for the course. I'm learning a lot from this course! but I'm slightly having an issue on 39:15 and 41:35. responsive mode is not working for me. hamburger menu and nav bar is overlapping. I even tried copying the code html from your GitHub directly but still the same.

[@DaveGrayTeachesCode]

Hello, my name is Dave Gray, not Gary. This is a good example of a simple typo that can cause problems though. The code in my repository works as shown in the tutorial. You can check it against yours with a tool like diffchecker.com.

[@binukbe4401]

@@DaveGrayTeachesCode Sorry Dave for calling you by your last name...but still no solution. I wish i could show you the screenshots.

[@DaveGrayTeachesCode]

@@binukbe4401 Gary is not my last name. It is Gray. Notice the different positions of the letters. A small error like this can also make your code not respond as expected. Check everything for differences. There must be a difference somewhere if it is not working as I show in the video.

[@binukbe4401]

@@DaveGrayTeachesCode Oh...I apologize in advance I did not notice that.🙏 Thank you for correcting me!🤗

[@ulenund9867]

😃😃This is so onpoint!! @@DaveGrayTeachesCode

[@fabrice9848]

Thank you for this great course!

[@DaveGrayTeachesCode]

You're welcome!

[@michelemoneywell8765]

Thank you again Dave Gray for a fun project. What an awesome person and great teacher you are, plus you are imaginative. Are you by any chance from New Jersey? I was, and not far from Fairfield either. STUDENTS: I recommend you have a "Back to top" anchor text underneath the Copyright column so even small screens can return to the top of the page. (The middle column gets hidden.) Also, keep a special color so you know how to use them in future. Do you know the story of rebeccapurple? It's heartbreaking on one hand, and positive on the other because people worked together to honor the daughter of a well-known CSS guy (he wrote books and more). Her favorite color was purple. She was called Becky, but said that Becky was a baby name, and when she turned six, she would be a big girl, and wanted to be called Rebecca. She died. The parents asked that people wear purple to her wake and funeral in her honor. A friend of the family suggested beccypurple be added to CSS colors in her honor. A Twitter storm ensued. The dad said: "For almost 12 hours she was six, before dying of brain cancer." So the color is rebeccapurple. Here is where/how I added a back to top anchor in the footer: All Rights Reserved Back to top

[@DaveGrayTeachesCode]

Thanks for sharing all of the information! I'm not from New Jersey. Over here in Kansas.

[@trantritin2002]

Great tutorial. But I think you should go from plain HTML with tags and texts first, then apply tailwind classes. It's easier to see the changes in every class you add to an HTML element. How can a beginner code a page without visual things by adding tailwind classes blindly?

[@shekhariyer327]

Totally agree, no point in showing concentric circles in beginning, that itself confused me

[@MolaMolaSunnyfish]

My CSS is not cooperating with me, it seems. I'm at 40:28. My text is not near as bolded or big, and the hamburger thingy is on the left side under my text. I have all the same code you do. Also, my rocket icon is above the text. I guess what I'm saying is everything is just going into the left side of the header and stacked on top of each other, rather than in a line or on the other side like you have it. My headers are not bolding either. The span around "Where No Rocket" also did absolutely nothing to the text. I seem to be getting further and further from what you have as I go. Do you know what I'm doing wrong? EDIT: Turns out I had "-- watch" in my package.json, rather than "--watch" so it wasn't recompiling the CSS.

[@leungdong8914]

Hello Dave, I always love your teaching, you made me understand javascript, css, html, hoping one day I hope to buy you coffee, but when I get to react I tried to style my component but not applying to it, I left react yesterday, to start with tailwind css I have almost installed everything I should add css to the build file I have been running into error, and I followed every steps

[@DaveGrayTeachesCode]

I can only suggest to review again. When there is an error, something must be incorrect. I can only guess from here, but I know you will find it.

[@lovelinkk]

Hello Dave, I've ran into a problem where my double quotation marks aren't showing up on 1:21:50. I copied the exact HTML from the resource file and pasted it into my own HTML file to see if i missed anything. Even after pasting the exact code they don't seem to be appearing. Any idea on this issue?

[@hdya3790]

a really great tutorial, 1 question though, why you use emmet to write the full class? why don't you use class auto complete from the tailwind intellicense?

[@sadeghshahidi]

This tutorials is wonderful Thank you so much

[@ebrahimsimaei]

really nice course man🔥🔥

[@mihirb8090]

Thank you this was great!

[@DaveGrayTeachesCode]

You're so welcome!

[@JUAN-SU]

Thank you for your video, by the way, I really like the colors you chose.

[@Bobcoolyoung]

Thank you Dave. You are awesomeness.

[@DaveGrayTeachesCode]

You are very welcome!

[@rahimco-su3sc]

excelent tutorial

[@DaveGrayTeachesCode]

Thank you!

[@vahan8995]

Thanks a lot! Great and handy job!

[@DaveGrayTeachesCode]

You're welcome!