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
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. 🚀🚀
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!
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".
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. :)
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!
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.
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.
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?
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
I do state at the beginning that you should already know CSS and list my CSS course as a prerequisite. If you know CSS already, then you just need to learn the Tailwind classes and how to apply Tailwind to your project.
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.
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
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!
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.
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?
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?
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?
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?
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
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.
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.
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 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 🙏
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!!!
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.
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?
i must say that this course is very helpful and should be promoted by UA-cam algorithms since it it well informative and beginner friendly. Good deed worth reward
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!
Hello Dave Gray. I was wondering whether this tutorial still works, especially the initial phases of installation and running node.js. It is proving really frustrating and worse is that you did not cover what you did for things to work smoothly. Kindly assist
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
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 ...
MBP ~ % npx tailwind -i ./src/ input.css -o ./build/css/style.css Specified input file ./src/input.css does not exist. Even though it shows in folder structure...
Hey Dave! Thank you! Given the new changes to NextJS version 13 that render almost all tutorials useless. Would you consider as future series the NextJS 13+ framework?
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!
dave sorry my code does not implement past where i used npx on the terminal to watch my code....any code i write after wont show on my browser... for instance the properties initially gave a div (color) was emerald when i decide to change to red it wont show on my browser
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?
English is not my first language and I see I did express myself poorly. What I meant was to know if I can learn from this video without worryng if everything in it is outdated or deprecated@@DaveGrayTeachesCode
You are rushing things too much and you expect a beginner to catch all these things. Go a little bit slow its like you just want to get over this course anyhow.
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
I show how to do it here. I have no idea what you might have done differently. Please rewatch where I do the install or follow the directions in the documentation: tailwindcss.com/docs/installation
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?
when i use live server it doesn't render anything. I've used vs code before but just with css so i know it works. i tried all the steps you went through and when i check for node modules with: ls node_modules | grep tailwind i get a response saying no such file or directory. I've tried installing and inititalizing it multiple times. has anyone else had this issue?
@@adityamehta2008I had the same issue until: 1) made sure tailwind.config content was ./build/*.html 2) on package.json, "tailwind" was "npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch" (i butchered the first "/" and it fucked everything up) 3) make sure you used "npm run tailwind" (biggest faceslap ever) 4) also, if you ever have any issue with "hidden" property not functioning correctly, try running npm run tailwind again, it worked for me
I followed the tutorial steps setting everything up in VS Code for the first time on 24/07/2024 (its my first time using Tailwind). I got the version tailwindcss@3.4.6 (vs Dave's v3.1.8). I also couldn't get my code to render until I copied Dave's code on Github for the style.css file then everything worked as normal. If I understand correctly Tailwind should have the "Just in time" functionality as default and any classes you use are automatically added to this style.css file. This wasn't the case for me and only by pasting in Dave's code which included the classes did anything render. I have not yet found how to fix this issue so the style.css file updates automatically. If anyone knows the answer let me know!
Found how to set up the files / file names so it works for me: Getting started: Use Vite to create your folder: npm create vite@latest project name (eg TailwindCSS1) (i chose Vanilla TypeScript for this first project) open the folder then in the terminal: npm install -D tailwindcss postcss autoprefixer (if this is not already installed) npx tailwindcss init -p (creates the tailwind.config.js file) Then a bit of file clean up (for example I created a Vanilla TypeScript file for the project so I deleted the ts files from the src folder) I removed the content of the style.css file Update the content in the tailwind.config.js content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], In the style.css file paste: @tailwind base; @tailwind components; @tailwind utilities; npx tailwindcss -i ./src/style.css -o ./src/output.css --watch (this creates the output css file where the tailwind code is stored and your new classes are added automatically) I added the link element to the output css file in my index.html file npm run dev / Go Live You can start adding Tailwind classes to your html elements!
I cover both grid and flex box in my CSS course that you can find on my channel. I believe I do use flex in the project in this tailwind course as well.
One more question please. why my terminal always shown this error message? "The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe" terminated with exit code: 2." I have search online but couldn't find any solution to it. Please help
Please, I need your help. Some of my tailwind classes are not working. For example, (class="ml-6") which should add some margin to the left side of the logo doesn't work on my code. (py-1, px-3, opacity, etc) don't work. I don't understand why some classes work and others don't. I have checked and all tailwind classes are properly installed. I don't know what else to do because this is stalling my learning. Please help
Hey Dave, in chapter 2 when you put z-10 in the header, It doesn't really do anything. When in full screen, I would like the header to be flush up against the top left corner of the window, so I assumed removing z-10 from the header would do that, but it jus stayed the same.
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
Thanks Dave
@@bitsolve3229 Join my Discord linked in the description. I check there often.
Thanks!!
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. 🚀🚀
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!
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".
Ha! Glad I may still provide a few tips and thank you for the support!
there few persons I admire them for one their abilities and you are one of them, for vibe and anything
Thank you for the kind words!
If come across a course,that comes from Dave Gray i know that course is perfect 🎉🎉🎉🎉 ❤❤❤
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. :)
Thank you for the kind words and hello 👋 to Poland!
2:10:54 you deserve a 10% of my first salaray
i learned alot from you
You are a wonderful teacher teaching us a great Taindwicss tutorial!!
Wow, cool! How does this work without npm i tailwindcss?
Dave, it should be illegal to be a god explaining things like you do hahaha
Great video like always!
You're too kind - thank you! 🙏💯
there is no God but Allah
The king just dropped this🤌🏿🔥
You are too kind - thank you!
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!
Glad you like it! 💯
Yes, 100% 😉
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.
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.
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.
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?
Totally agree, no point in showing concentric circles in beginning, that itself confused me
This tutorial is the ultimate is re-learning a skillset I had a hard time rekindling for years.
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
Pretly Good
is tailwind work only online ? ( when there is internet connection only ) help me
your video it's not good for beginners I think. because you are not explaining anything :) you just writing the code of tailwind :))))))
I do state at the beginning that you should already know CSS and list my CSS course as a prerequisite. If you know CSS already, then you just need to learn the Tailwind classes and how to apply Tailwind to your project.
Was already giving up on my web development journey and I stumbled upon your tutorials thanks man really helped alot
Glad I could help!
I’m still in this boat, looking for the light at the end of the tunnel
This video is a life saver. Thank you so much
Glad it helped!
Thank you for this great course!
You're welcome!
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.
Glad I could help!
Swears ❤
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
You're very welcome!
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
Thanks, you too!
@@DaveGrayTeachesCode u welcome bro
Thank you this was great!
You're so welcome!
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!
Thank you Dave for the great work. This is the best tutorial I found in learning Tailwindcss.
Glad to hear that! You're welcome!
Sir, your videos are awesome! Thank you for sharing all this high quality knowledge with us!
in this tutorial we also learning about responsive desgin?
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.
creator of tailwind css tuts lol
Made it to the 50min mark and realized that tailwindcss is not for me. So overwhelming with all the classes. I like writing CSS
It’s the way he’s teaching it. He’s teaching it the wrong way. It’s not a beginners course
@@olowojobabankole4671suggesta better resource then?
Are you still using plain css 😂😂
@@okkashaally2115 what's wrong with plain css
Just dont give up, or U will endup using bootstrap
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?
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?
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?
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?
excelent tutorial
Thank you!
My vs code not making another file in build folder by giving npx command
Never realized that hamburger icon is bagua trigram of heaven... gonna be calling it that from now XD
thanks you dave for this tutorial,I love it so much
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
Glad to hear that and hello 👋 to Egypt!
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.
My hamburger icon is not showing up although I put in the correct code from the site
I am stuck, And I can't even ask question on Discord it says unable to accept the invite.
I don’t know if you ever answer this but the toggle button here doesn’t work after deploying with render
I ran the auto compile command but it's not auto compiling. How can I fix it?
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.
Glad it was helpful!
Thank you very much for the tutorial. Very useful and the perfect intro to Tailwindcss. I like very much the way you teach.
You're very welcome!
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 🙏
Thank you! You can request TS and I can suggest the TS series I recently started: ua-cam.com/video/MOO5vrtTUTE/v-deo.html I hope it helps! 💯🚀
@@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 🙏
Thanks for the tutorial. Is this tutorial using the new Tailwind 3 ?
Yes
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!!!
Glad to hear that!
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.
Seems like a good catch! I'll check it out. 🚀
@@DaveGrayTeachesCode Thank you Dave so much. I feel happy as this is the first time I got PR merged. You made my day 😃
@French developers: Ctrl + J to open a terminal in VS Code.
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?
非常棒的课程，谢谢。
This is so great but my question is can put my website of 4 pages in a single html file and it will navigate to all pages
i must say that this course is very helpful and should be promoted by UA-cam algorithms since it it well informative and beginner friendly. Good deed worth reward
Thank you for the kind words!
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!
Hello Dave Gray. I was wondering whether this tutorial still works, especially the initial phases of installation and running node.js. It is proving really frustrating and worse is that you did not cover what you did for things to work smoothly. Kindly assist
This ain’t a tutorial. This is like watching a guy coding.
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
2:27:46 I did everything like in the tutorial, but the X is not appearing what might be the reason?
i am a begginer never thought coding will drain you this much i have learnt only css html and tailwind so far
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 ...
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.
How’s it for you now?
It’s been over a year since u made this comment I hope it got better 💕
@@iamsahtohan4141 dedication pays thats what i can say .....are you on linkedin we connect
@@KojoJohnson are you on linkedin we connect
MBP ~ % npx tailwind -i ./src/
input.css -o ./build/css/style.css
Specified input file ./src/input.css does not exist. Even though it shows in folder structure...
Hey Dave! Thank you! Given the new changes to NextJS version 13 that render almost all tutorials useless. Would you consider as future series the NextJS 13+ framework?
Absolutely! And I'm glad I waited until now, too! 😆
@@DaveGrayTeachesCode Thank you!! You are my to go Teacher for everything web dev. Thank you so much for all the tutorials you've already uploaded!
What about screens though 1:2 and 3:2
During compilation it's said No utility class were detected in source files ...so if anyone facing same prblm plz reply
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!
dave sorry my code does not implement past where i used npx on the terminal to watch my code....any code i write after wont show on my browser... for instance the properties initially gave a div (color) was emerald when i decide to change to red it wont show on my browser
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?
Hello, Sr Gray. Is this course updated in 2024?
No I made this course last year. You can still learn tailwind from it. After you publish a video on UA-cam, you can't go back and edit or update it.
English is not my first language and I see I did express myself poorly. What I meant was to know if I can learn from this video without worryng if everything in it is outdated or deprecated@@DaveGrayTeachesCode
You are rushing things too much and you expect a beginner to catch all these things. Go a little bit slow its like you just want to get over this course anyhow.
Others say I go too slow or they watch it at 2x speed. I can never make everyone happy. I guess you'll have to settle for a free course.
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,
Hi Dave, my trigram for Heaven button is attached to my website logo, any help on how to go about that
Great! I had been hesitant to use Tailwind for some time, but your video has sparked my enthusiasm for it.
Glad to hear that!
Another note. If you're on mac and press control + command + space then you can get emojis that way as well.
Nice courses, but I have a question, are you actually applying all these classes to an element before seeing the result as in the video?
Sometimes. It depends how comfortable/confident you are with it. Many prefer to look at each change.
Says npx tailw
indcss -i ./src/input.css -o ./build/css/style.css does not exit. Yet I follewd exactly
Thomas Sarah Lopez Richard Garcia Linda
i got lost at hamburger menu. "Testimonials" and "Contact us" menu/link not responding when clicked
bg is not geeting dark , header is not showing , lesson 2
Hi, thanks for this tutorial. The favicon from lesson 2 is not showing up on github.
@12:00 Why do we need to recompile the css? We made no changes to input.css, we only modified our html file.
Tailwind reads the classes in your html file. Then it compiles the CSS based on those classes.
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
in chapter 2 when i write "npm run tailwind" i get missing script err how can i fix this, thx
I recommend going back to review prior parts of the video. Something was missed. This refers to the script in your package.json file.
tailind dont install with npx here , gives error
very good tutorial (bookmark: 1:05:00)
Thank you sir 😀💫
You're most welcome
my vs code not generating tailwind.config.js file (i did all steps) pls tell solution
I show how to do it here. I have no idea what you might have done differently. Please rewatch where I do the install or follow the directions in the documentation: tailwindcss.com/docs/installation
Thank you for your video, by the way, I really like the colors you chose.
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?
when i use live server it doesn't render anything. I've used vs code before but just with css so i know it works. i tried all the steps you went through and when i check for node modules with: ls node_modules | grep tailwind i get a response saying no such file or directory. I've tried installing and inititalizing it multiple times. has anyone else had this issue?
i am having same issue. please help if you solved this
@@adityamehta2008I had the same issue until:
1) made sure tailwind.config content was ./build/*.html
2) on package.json, "tailwind" was "npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch" (i butchered the first "/" and it fucked everything up)
3) make sure you used "npm run tailwind" (biggest faceslap ever)
4) also, if you ever have any issue with "hidden" property not functioning correctly, try running npm run tailwind again, it worked for me
I followed the tutorial steps setting everything up in VS Code for the first time on 24/07/2024 (its my first time using Tailwind). I got the version tailwindcss@3.4.6 (vs Dave's v3.1.8).
I also couldn't get my code to render until I copied Dave's code on Github for the style.css file then everything worked as normal.
If I understand correctly Tailwind should have the "Just in time" functionality as default and any classes you use are automatically added to this style.css file. This wasn't the case for me and only by pasting in Dave's code which included the classes did anything render. I have not yet found how to fix this issue so the style.css file updates automatically. If anyone knows the answer let me know!
Found how to set up the files / file names so it works for me:
Getting started:
Use Vite to create your folder:
npm create vite@latest
project name (eg TailwindCSS1)
(i chose Vanilla TypeScript for this first project)
open the folder
then in the terminal:
npm install -D tailwindcss postcss autoprefixer (if this is not already installed)
npx tailwindcss init -p (creates the tailwind.config.js file)
Then a bit of file clean up (for example I created a Vanilla TypeScript file for the project so I deleted the ts files from the src folder)
I removed the content of the style.css file
Update the content in the tailwind.config.js
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
In the style.css file paste:
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/style.css -o ./src/output.css --watch (this creates the output css file where the tailwind code is stored and your new classes are added automatically)
I added the link element to the output css file in my index.html file
npm run dev / Go Live
You can start adding Tailwind classes to your html elements!
good but it does not include any content about grid and flex box and its issues. thanks any way
I cover both grid and flex box in my CSS course that you can find on my channel. I believe I do use flex in the project in this tailwind course as well.
It seems like the best cool Programmer Dudes🏄♂ have a guitar.
Rock on! 🎸
Such a great tutorial! Basics to customizing themes. I was looking for it. Thanks, Dave. Your tutorial helps a lot.
Glad it was helpful!
One more question please. why my terminal always shown this error message? "The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe" terminated with exit code: 2." I have search online but couldn't find any solution to it. Please help
same problem here have you solved it!
broo
Please, I need your help. Some of my tailwind classes are not working. For example, (class="ml-6") which should add some margin to the left side of the logo doesn't work on my code. (py-1, px-3, opacity, etc) don't work. I don't understand why some classes work and others don't. I have checked and all tailwind classes are properly installed. I don't know what else to do because this is stalling my learning. Please help
stackoverflow.com/questions/70577297/tailwind-class-is-not-working-after-installed
One of the best tailwind tutorials out there on the internet. Thank you very much.
Hey Dave, thanks for the tutorial, just wanted to know if it would be necessary to learn tailwind css before going into your Next.js full course?
It could help but it's not a deal breaker.
@@DaveGrayTeachesCode Okay Thanks so much man for giving me such a quick reply😊
Hey Dave, in chapter 2 when you put z-10 in the header, It doesn't really do anything. When in full screen, I would like the header to be flush up against the top left corner of the window, so I assumed removing z-10 from the header would do that, but it jus stayed the same.