In this Tailwind CSS lesson, we will begin building a project which will help us learn many of the Tailwind CSS class names as well as how to apply media queries for both sizes and light & dark modes. You will see how Tailwind CSS Intellisense helps us easily see the actual CSS style rules that are applied, and how quickly we can add Tailwind classes to HTML once you become familiar with them. If you are just getting started with CSS, I recommend going to my CSS for Beginners course here: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html
I'm glad I chanced upon your channel Dave. I just started my internship and was new to tailwind. Your videos and detailed explanation has given me a level of confidence that I am so glad I came across your video. Thank you for sharing your knowledge with us.
Thank you, Dave, for such content and to think of it all for free, it's amazing..been working on BS for some time but now jumping onto Tailwind, and omg I just landed on your channel, thanks mill pal🤝🤝, you have earned a Subscriber
Hi. Very nice and well explained tutorial, thanks. I have noticed that you added classes: w-2/3 sm:w-5/6. But tailwind is mobile first, right? Shouldn't it be vice versa? w-5/6, md:w-2/3? It is on
Hey Dave, thank you for all the content sir, I love learning from you! 🔥 Can I ask for a favour and ask if you could make a tutorial on using Express and Tailwind and creating a project or even just showing a video on how to set things up? Thank you!
Hey Dave, can you cover how would you do a really complex navigation menu on mobile (University website kinda with very nested menus) with tailwind?I can't find anything related to it. Thanks!
Good request! There are many different 3rd party APIs for this. I'm sure some do not cover these details due to sensitive financial info, but I'll look into it.
Hi Dave, I am new to this and I have a noob question to ask, I tried to follow your video step by step and when I tried to install the prettier-plugin-tailwindcss to vscode, i can install it but it doesn’t show up on the package.json file, i have to manually add “devDependencies”: { “prettier-plugin-tailwindcss”: “^0.3.0”} to the json file manually, may I know why does this happen and am I doing it right by adding it myself? Thank you.
Hello, Thank you for your lesson. I regret that I didn't know about your chanel earlier. Found it by infinite scroll react video. By the way, on 33:00 you press Ctrl+D and change rockets to testimonials. Why inside h2 tag it becomes capitalized and inside id - lowercased?
You're welcome! Ah yes - you are asking about Ctrl+D and to preserve the case, you need to install the extension "Multi Cursor Case Preserve" - it's great!
Actually it's the intellisense extention that does not seem to be working, after installing is there any setting to change or anything to enable it? I hover over and I am not seeing the css,
when ever i put in npx tailwindcss init it says The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npx + ~~~ + CategoryInfo : ObjectNotFound: (npx:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException do u know how to fix this?
Hello Dave, thank you for this usefull video ! I have a question at 33:00 you're selecting words using CTRL+D and replacing and it seems to be case sensitive can you tell me please how you did this ?
Looks better than Bootstrap so far at least to me, Tailwind docs are extremely helpful as vanilla css properties are mentioned for each class, I don't remember if I mentioned this before, but we can test dark/light mode using Chrome dev tool/Styles/The little paint brush icon. Thanks Dave and have a nice weekend 🚀
Hi Dave. I followed your instructions but i'm getting this error: Unknown at rule @tailwindcss(unknownAtRules) Is it cuz my version of tailwind is different from yours or any other reason? Can you provide me a fix? I really would love to follow you here. Thank you
How do you calculate the correct size to use when building a project, should I just play around figures till I get the one I like or is there a specific mathematics for that ?
Hi - great course its valuable to have a such a resource to starrt learning tailwind - whihc looks great btw - one issue I have followed the video and applied the code yet I still have a light screen - I compared to the github and all looks good but not sure what Ive missed to have a 'light theme' anyway thanks for putting this together great help :-)
If anyone has issues with the smooth scroll not working in Chrome try using the !important modifier eg Took me a while to figure out Chrome might have issues with smooith scroll
I'm not quite sure where I went wrong since applying styles to the body element in Acme Rocket doesn't change anything. However when I apply the same styles to the h1 element it does change but not to the body. Kindly share some thoughts. Thanks.
I can only guess about your code. My source code is available at the course resources link in the description and is provided by chapter. Please compare your code to mine to look for differences.
Is your browser zoomed in? everything looks much narrower on my version. Great tutorial BTW, thanks Edit, I just switched my max widths to 5xl and it looks good, so I learned something extra :)
I never truly know. I just go where the content leads. This will not be a long series though. It is just for introducing Tailwind CSS and creating some familiarity with classes and settings.
It's a dislike from my side. I think it would be an improvement if you add the html elements first and then start adding the css classes. This way i can see what each tailwind css class does.
Hi Dave, I was trying to download the course files from the git repo as zip files but I got warnings from my anti virus saying that the files have Trojan " Trojan:Script/Wacatac.H!ml " classified as Severe! but cloning the repo was fine had no issue 🤷♂
@@DaveGrayTeachesCode My anti virus is just windows defender actually and you are right I tried downloading completely different repo and same thing happened but as I said cloning the repos works fine, thank you for all your awesome content ❤️
In this Tailwind CSS lesson, we will begin building a project which will help us learn many of the Tailwind CSS class names as well as how to apply media queries for both sizes and light & dark modes. You will see how Tailwind CSS Intellisense helps us easily see the actual CSS style rules that are applied, and how quickly we can add Tailwind classes to HTML once you become familiar with them. If you are just getting started with CSS, I recommend going to my CSS for Beginners course here: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html
What should I start with when starting tailwind css for 1st time. Coz it's bouncing over my head , coz these classes are not clicking in my head.
@@Sky-yy go to lesson 1 in this series.
I'm glad I chanced upon your channel Dave. I just started my internship and was new to tailwind. Your videos and detailed explanation has given me a level of confidence that I am so glad I came across your video. Thank you for sharing your knowledge with us.
Thank you, Dave, for such content and to think of it all for free, it's amazing..been working on BS for some time but now jumping onto Tailwind, and omg I just landed on your channel, thanks mill pal🤝🤝, you have earned a Subscriber
Hi. Very nice and well explained tutorial, thanks. I have noticed that you added classes: w-2/3 sm:w-5/6. But tailwind is mobile first, right? Shouldn't it be vice versa? w-5/6, md:w-2/3? It is on
I think either way would work.
An awesome way of learning Tailwind CSS. Thank you Dave for such effort ❤
Glad you enjoyed it!
Thank you so much for this, it helped me. Love how you explain every small detail unlike other people.
Glad it was helpful!
You are a great help, Dave. Thank you for so many things you’ve taught me.
Hey Dave, thank you for all the content sir, I love learning from you! 🔥
Can I ask for a favour and ask if you could make a tutorial on using Express and Tailwind and creating a project or even just showing a video on how to set things up?
Thank you!
Hey Dave, can you cover how would you do a really complex navigation menu on mobile (University website kinda with very nested menus) with tailwind?I can't find anything related to it. Thanks!
Great request! 💯
Amazing content and project.
I cant wait for more of tailwindcss series!
Thank you! Coming right up!
Awesome as always!! every word has value. Thanks, Dave, for sharing 👍
43:59 I was also bangin my head over that issue! ...this video is helpful!
Thank you Dave for this amazing content
You're welcome!
Awesome!!! This is exactly the kind of project I was looking for. TQVM Dave. It is much appreciated 👍👍
Glad to help!
This was a fun project and it really helped me understand Tailwind CSS. Thanks so much Dave, you made me a better frontend dev today.
Glad it helped!
At 9:30, how do we make it so that prettier formats other files as well, for instance all js files?
Thank you for this amazing tutorial, I have learned so much already
Dave i want to ask.
Will you make a turtorials how to add a payments to websites?
I coundnt find any good turtorial on youtube.
Good request! There are many different 3rd party APIs for this. I'm sure some do not cover these details due to sensitive financial info, but I'll look into it.
Hi Dave, I am new to this and I have a noob question to ask, I tried to follow your video step by step and when I tried to install the prettier-plugin-tailwindcss to vscode, i can install it but it doesn’t show up on the package.json file, i have to manually add “devDependencies”: { “prettier-plugin-tailwindcss”: “^0.3.0”} to the json file manually, may I know why does this happen and am I doing it right by adding it myself? Thank you.
Estou a gostar dessa serie, mais uma aula incrível.
After creating the script for prettier, am I supposed to do npm run prettier? Because the extention does not seem to be working for me.
Can't thank you enough keep up the good work you are my idol
Your content is just amazed! Learnt many things from you and will continue learning from you Sir💖❤
Thank you!
Hello Dave, as I really enjoy your tutorials I would love to see a tailwindcss react tutorial :) Thanks for your work!
Thanks for the request!
Hello, Thank you for your lesson.
I regret that I didn't know about your chanel earlier. Found it by infinite scroll react video.
By the way, on 33:00 you press Ctrl+D and change rockets to testimonials.
Why inside h2 tag it becomes capitalized and inside id - lowercased?
You're welcome! Ah yes - you are asking about Ctrl+D and to preserve the case, you need to install the extension "Multi Cursor Case Preserve" - it's great!
Thank you!
Actually it's the intellisense extention that does not seem to be working, after installing is there any setting to change or anything to enable it? I hover over and I am not seeing the css,
I am not seeing the css as well. I've tried disabling and reinstalling intellisense, still nothing when hovered over.
Me too the tailwind classes are.not shown @theonlyjl17
Y
Me too help please
when ever i put in npx tailwindcss init it says The term 'npx' is not recognized as the name of a cmdlet, function, script file, or
operable program. Check the spelling of the name, or if a path was included, verify that
the path is correct and try again.
At line:1 char:1
+ npx
+ ~~~
+ CategoryInfo : ObjectNotFound: (npx:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
do u know how to fix this?
A couple of solutions are posted in the answer of this post: github.com/facebook/create-react-app/issues/9735
@@DaveGrayTeachesCode thank you
Hello Dave, thank you for this usefull video
! I have a question at 33:00 you're selecting words using CTRL+D and replacing and it seems to be case sensitive can you tell me please how you did this ?
The VS Code extension "multiple cursor case preserve". It's great!
@@DaveGrayTeachesCode Thank you Dave !
Looks better than Bootstrap so far at least to me,
Tailwind docs are extremely helpful as vanilla css properties are mentioned for each class,
I don't remember if I mentioned this before, but we can test dark/light mode using Chrome dev tool/Styles/The little paint brush icon.
Thanks Dave and have a nice weekend 🚀
Great tip, Ahmad! You have a great weekend, too! 💯🚀
i was waiting for this video . thanks
Welcome!
Thank you for this series!
You're welcome!
Hi Dave. I followed your instructions but i'm getting this error: Unknown at rule @tailwindcss(unknownAtRules)
Is it cuz my version of tailwind is different from yours or any other reason? Can you provide me a fix? I really would love to follow you here. Thank you
My Life Best Teacher Thanks
You're welcome!
So basically u need to remember the class or can find it on the tailwind website?
How do you calculate the correct size to use when building a project, should I just play around figures till I get the one I like or is there a specific mathematics for that ?
It is more experimenting. The more you do it, the better your estimates will become.
Hi - great course its valuable to have a such a resource to starrt learning tailwind - whihc looks great btw - one issue I have followed the video and applied the code yet I still have a light screen - I compared to the github and all looks good but not sure what Ive missed to have a 'light theme' anyway thanks for putting this together great help :-)
Beautiful project! Thanks, Dave!
God bless!
Abraço!
You're very welcome!
If anyone has issues with the smooth scroll not working in Chrome try using the !important modifier eg Took me a while to figure out Chrome might have issues with smooith scroll
@Dave the dark:bg-black doesn't seem to work. Still getting a white background. My code is identical to yours.
Are you using Linux and Chrome? There is a known issue some have discussed about Chrome.
@@DaveGrayTeachesCode I am on Mac with M2 CPU running Ventura 13.3 using Chrome Version 112.0.5615.137 (Official Build) (arm64)
I'm not quite sure where I went wrong since applying styles to the body element in Acme Rocket doesn't change anything. However when I apply the same styles to the h1 element it does change but not to the body. Kindly share some thoughts. Thanks.
I can only guess about your code. My source code is available at the course resources link in the description and is provided by chapter. Please compare your code to mine to look for differences.
If you add the content of the element and then add classes one by one, it will be easy to understand
Amazing lecture as always
Many thanks!
Cool project loved it!! ❤
Thank you!
Thank man! Subbed and liked!
Welcome aboard! 💯🚀
Awesome! What kind of computer you use? Do you prefer Windows?
I use Windows most often.
Thank you, Dave
You're welcome!
Awesome tutorial thank you
You're welcome, Sona!
Is your browser zoomed in? everything looks much narrower on my version.
Great tutorial BTW, thanks
Edit, I just switched my max widths to 5xl and it looks good, so I learned something extra :)
I may have zoomed in. Glad you learned something extra!
awesome tut just using my custom css also waiting for next tut
Thank you!
thank u bro❤
How many parts are there in this series?
I never truly know. I just go where the content leads. This will not be a long series though. It is just for introducing Tailwind CSS and creating some familiarity with classes and settings.
Amazing content.
Much appreciated!
Sir, not working.
Check your spelling "black"
😮💨
@@utinthein7274 your operating system preference must now be set to a dark theme to see a black background and white text.
Ofcourse Sir, i forgot on off theme🥰
Thank you
Welcome!
You are the best
Thanks!
Wow very useful
Glad to hear that!
Hey Dave keep the good work the channel is growing strong,will you be doing clones so that we get real world experience
Thanks
Maybe sometime - clones do not interest me as much, but I do see their usefulness. I'm glad you have liked my content so far!
Great!
Thanks! 💯
button: sm:hidden
nav: hidden sm:block
can you explain please
?
I thought I did, but here you go: tailwindcss.com/docs/hover-focus-and-other-states#media-and-feature-queries
26:44
🔥
World best👍
Thank you for the kind words!
great
Thanks!
Excellent, very instructive. But it seems that intuitively doing this will be long time coming ..... this stuff doesn't come naturally to me
It can take time.
❤
It's a dislike from my side.
I think it would be an improvement if you add the html elements first and then start adding the css classes.
This way i can see what each tailwind css class does.
Hi Dave, I was trying to download the course files from the git repo as zip files but I got warnings from my anti virus saying that the files have Trojan " Trojan:Script/Wacatac.H!ml " classified as Severe!
but cloning the repo was fine had no issue 🤷♂
Strange - seems your anti-virus doesn't like any type of script files. Just learning code here! I recommend git clone as well.
@@DaveGrayTeachesCode
My anti virus is just windows defender actually and you are right I tried downloading completely different repo and same thing happened but as I said cloning the repos works fine, thank you for all your awesome content ❤️