Tailwind Crash Course | Project From Scratch

Thanks for this Video. It is more content!👍

this is som much helpful thank you

can you please share image files

thus we have to know js for this project?

Helped me a lot, thanks for the effort.

Thank you very much bro

Thanks but the tailwind is very disorganized i really don't like it

When you have a custom class, like hamburger one, you must write it necessarily in traditional css or you may do it in tailwind format? Sorry for my poor English! Thank you!

Great vid, working through it myself now. One remark: installing Live Server on VSCode/macOS hijacked the CMD+L (select current line) keyboard shortcut. Not a great experience, though I eventually learned how disable that (cmd-shift-P for Command Palette, Open KeyBoard Shortcuts, find Live Server CMD-L lines, delete via right click menu).

thank you very much for the masterpiece

How can I hide something with js without any reference to screen size but if a user clicks or not?

Thank you very much for the video. I don't know if this approach to build a mobile menu causes any bugs with the tech stack used in the video, but it does create some problems when used with React. I used this code to build a menu in my react project and the problem I faced, was that if there are any interactive elements (links in my case) under the menu, when it is hidden with "opacity" property and "absolute" position, these elements are not clickable, because the menu is though hidden, is still there. On top of that, the links of the menu itself are also clickable at all times, even when the menu is hidden. You can imagine how it can cause not so obvious and hard to discover bugs. To fix this issue, I used visibility: hidden/visible and z-index: -1/1 to hide/show the menu and make links clickable/unclickable.

bro u made our life very easy thanks you for this video <3👍👍❣

Thanks for the video tutorial. I really appreciate the video. There are so many classes that I didn't know existed and this video teaches them in a proper manner. But, I would have liked a better explanation on how the design is getting translated to the code. For example, I would like to understand your process and thinking behind coding the specific divs and how you are thinking about the layout and so on. Also. Just writing the content first and then adding classes to it explains the process in a better manner. In most of these crash courses, I don't get to see this in action. It is just code from top to bottom without a clue on what is being laid out under what. Thanks for the effort once again. Yo have a great community of people here

I think I will take this course🎉

Sir design is not responsive on the iPad. Issues in the footer

Thank you from Brazil, this is a amazing job, I started yesterday with tailwind I really felt lost before start watching this video, thank you man!

You are the best.

where is the image file?

thank you, thank you so much

Can someone please tell me which theme is he using in vscode? I liked the color scheme a lot

@traversy media my question is why do we toggle the class 'hidden' when adding an eventlistener on btn ,when there is already a hidden class on id=menu

thank you

I created a portfolio web project using a CSS framework called Tailwind in 2022. Thanks for the tutorial.

Why do we need to write the build and watch scripts for tailwind? Does live server not do that automatically to refresh page based on our recent changes?

There was lack of explanation cause you wrote classes first then put the content in the div, instead next time try to put the content and then show classes as it shows how it is working.
But still thanks for the tutorial

Loved the recording & presentation. BUT, we'd understand it better if you save frequently instead of "ta da!" at the end. I mean if you skip the Emmet method and do save frequently as you add classes in the existing element, we would understand better what happens with what.

Thanks Brad. Great stuff

Thank you so much for this Brad! But the hamburger bar is not working from my end. I have checked and compared my code with yours but was unable to figure out what the problem is.

You rock. Thank you so much.

Thank you Brad

Interesting. Just finished doing this course and I really enjoyed. It was a little bit complicated and hard but I will try to read code again and try to make again every small section. :)

I've been studying / coding for a little over a year now and I'm starting to just look for your videos when I learn a new topic. If you didn't cover it, I look elsewhere but you're my go-to now. I appreciate all the help.

Finished the video. Very instructive! Thank you very much, Brad!

font-bold is not working in my project, and also text-4xl, I can't find the solution.

I wish there's a similar tutorial for a Dashboard.

Brad I'm building a School Management System with React and I'm using this page as my Landing Page, hope you won't sue me for copyright issues? 😒

Brad has always been there for these tuts man big thanks and great advise for learning

I get an error when i try to use the repository path as public_html: Error: You cannot use the “/home/xxxx/public_html” directory because it already contains files. Can anyone help please?

Great content! Thank you ❤

Great video, is there a reason you adding display flex and flex col on sections with block items like the hero left section

Some people are saying that Tailwind is not good for responsive/mobile. I think they don't know what they're doing. Good video though.

Best coach ever ! nothing else to say, thank you for everything

We love the Boston accent

I dont know why and if Im the only one, but it doesnt scale right on mobile version at my project. if I copy your complete code, it doesnt also work correct. did i miss something to include from tailwind? e.g. in the header the image will not be above the heading in sm, it looks the same like on md screens. so the w-1/2 and flex-col-reverse is not working and some other classes .... can someone help me?

EDIT: Found the problem in the input.css. you have to change the import to:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";