Tailwind CSS is a utility-first CSS framework that is currently very popular. It is easy to transition from writing CSS to using Tailwind CSS because it applies one styling rule at a time much like CSS, but it uses easy to understand class names that you can quickly add to your HTML. In this intro to Tailwind CSS tutorial, we'll set up a dev environment with Tailwind CSS, look at some helpful VS Code extensions, and build a small project to get you started! If you are just learning CSS, I recommend learning the CSS basics first in my CSS for Beginners course here: ua-cam.com/video/n4R2E7O-Ngo/v-deo.html
Hello and thank you for this tutorial, So far I have followed your steps, but when I run Live Server, it doesn't automatically open the html page in a browser. It first opens the browser but it shows as a directory. Why is that? In Other words in the browser it shows build directory src directory and the tailwind.config.js file
This was the only Tailwind CSS tutorial to actually get me what I need and then I realize I did not write the output css file right took awhile but figured it out. Thank you!
@DaveGrayTeachesCode you have truly helped me learn CSS to a commendable level and now you're teaching me tailwinds. Thank you so much Boss. Get to meet you someday.
Never user Tailwind before, but if it was up to me to decide I would choose Tailwind over Bootstrap or any other css frameworks just because their classes are easier to remember for someone who spent most of his time using vanilla css Thanks Dave!
@@DaveGrayTeachesCode I got 3 warings in my style.css file ? This is weird because MR. Gray you had only one and also your lignes are 552 and mine are 556
Best free web dev stuff on youtube right now honestly. Just a btw for people installing node, I would recommend you use nvm to install. Had a few headaches when installing node directly, it messed up some dependencies in React. Probably because I was using create react app though
wow wow wow this is amazing you really helped anyone needs to be full stuck web developer, really i have not watched this vedio yet because i am still watching and learning your css 11hours vedio, i will be right back this amazing tutorial when i complete that vedio thanks again from somalia 🇸🇴 😀
hi Dave, this is the first time I am here and I really loved this intro to Tailwind video - I loved the pace and nice bulls eye example which was some concrete enough for me to practice on my own. I loved your energy and the way you introduces productivity tips like emmet shortcuts, VSCode extensions, etc. Thank you so much Dave.
Another great video, I started learning CSS from you three weeks ago, now I am very comfortable with the fundamentals, thanks for this great content Dave ❤
I hated tailwind css at first. I thought writing inline styles would make the code look messy but the more I know about it, the more I use it. I use it all the time now :D
Hi Dave, thank you for this great video, so many details and tricks, a clear way explaining how to set up and more, I have learnt so much already and answered many questions! I will keep watching and experimenting... Thank you B
Great. Glad to be seeing the new series from you. Thanks, looking to more videos on Tailwind. Consider discussing Tailwind components libraries like Taiwindcomponents Flowbyte
@4:45 I think maybe this is where the "Live Preview" extension shines. Also @20:21 VSC has a "Create Manual Folding Ranges from Selection" function that can be run per instance, so you can still see classes etc when you need them. Thanks for the tut👍
Good notes! Do you like the Live Preview extension better than Live Server? The folding ranges command from VS Code folds full lines of code which can be helpful, but it won't just hide the classnames for me like the Inline Fold extension.
@@DaveGrayTeachesCode I've been watching the LP extension grow. I'm not sure it's better (or even faster to load), but have a feeling MS will just merge it into the app - who knows. Good point with Inline Fold. thanks!
😍 let chil and enjoy the contents, as usual your are doing great work here. Am going to save everything for vacations and enjoy every minute love your lesson.
Good video Dave as always , i was using Sass and Styeld components and then changed to tailwind and i can tell that its really cool and as you mentioned about mobile first .
Wow this is really amazing. thanks Dave. . one more thing, i really suggest after at the end, you add two or three project templates design with tailwind including the techNotes project.
You're welcome! Good suggestions! I've got a couple of projects in mind for this series, but converting the techNotes project might be a good additional one, too!
Thanks for the series sir, would definitely take a look at it after I complete learning JavaScript. One suggestion, it would be great if you make the videos project based.
I dont understand why the Documentation does not show how to add tailwind to a normal html file they all force you to sue some framework like NExt or React, this is so much simpler thank you very much!!
5:20 After you typed in "npx tailwindcss init" consule will spit out fallowing : "Need to install the following packages: tailwindcss@3.3.2 Ok to proceed? (y) " type y - it will install tailwind to your machine. Just one step Dave missed .
Hi Dave, Awesome ,I think its time to start a project base video on TYPESCRIPT with REACT,Please we are eagerly waiting ,Lot of fellow developers agree with me.❤❤❤❤
Possible stupid question - did I miss how we INSTALL Tailwind? I get the init but don't we have to install before that with an npm command? Apologies if I missed this somehow (duh)🤷♂
Thanks so much. Quick question: how do you get it so that you can write the html elements and class names with the dot notation? div.grid.shadow etc. Thanks again
However, ideally, you should move your HTML files to a source folder (like src or public) and then configure Tailwind to scan those files. This will keep your setup more organized. I tried following your approach it didn't work im getting this error: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
I can't get the vscode tailwind intellisense to work... Have uninstalled and installed multiple times. Nothing shows up when I hover. Any ideas what might be wrong?
Thank you. I already have. A full stack real world project is advanced. Make sure you know the pre-requisites I mention before attempting this: ua-cam.com/video/CvCiNeLnZ00/v-deo.html
when I used npx at the start for some reason it made a tailwind.config.scss file but then I did it a second time and it made the config.js file Just curious if that's something new since this video was made or if I mistyped something
Hello Dave, I see that when u save your html file, the --watch tailwind rebuild your style.css file, and you were able to see the changes using live server. In my case, when i save my html file, nothing happens until i save my ./src/input.css or the tailwind config file. I was watching for solution: install postcss-cli, use the mode:'jit' inside the tailwind config file... but nothing helps. If u have a second, it will be nice to get some help.
Hello again, If u were wondering, what is the problem: just the file name. I named the file "tailwind_course (Dave Gray)". I guess this space between, or the "()" gives me the error.
Amazing videos. watched from start to finish (you explain it better than any other video (perhaps even tailwind themselves) I have a question regarding the config file, Tailwind notes state 'src' in the path added to the content ["./src/**/*.{html,js}"] and you use "build". Are both right ?
Yes, it depends on where your html file is - which might depend on what you are building your project with. If you look at the GitHub repo for this video, you will see my index.html is in my build directory. Tailwind needs to read the classes inserted into that file to generate the CSS that is used. If I was building with Next.js, I might want it to look in my src directory for js, jsx, ts, or tsx files instead.
Tailwind CSS is a utility-first CSS framework that is currently very popular. It is easy to transition from writing CSS to using Tailwind CSS because it applies one styling rule at a time much like CSS, but it uses easy to understand class names that you can quickly add to your HTML. In this intro to Tailwind CSS tutorial, we'll set up a dev environment with Tailwind CSS, look at some helpful VS Code extensions, and build a small project to get you started! If you are just learning CSS, I recommend learning the CSS basics first in my CSS for Beginners course here: ua-cam.com/video/n4R2E7O-Ngo/v-deo.html
Hello and thank you for this tutorial, So far I have followed your steps, but when I run Live Server, it doesn't automatically open the html page in a browser. It first opens the browser but it shows as a directory. Why is that?
In Other words in the browser it shows build directory src directory and the tailwind.config.js file
Dave, you are such a gem. I have seen so many videos of tailwind installation, nothing comes close to your style of explanation period.
Thank you!
True
Literally no one addressed the issue of how the styles.css is minimal when first starts and requires to build the CSS again. Thank you SO MUCH!!!
Do you recommend I start here? I know html css and JavaScript. I'm learning React. I need tailwind to save me 😂
Dear dave I love how you explain everything from scratch,you taught me html ,css and now it's tailwind thank you so much for your content
I was thinking of learning tailwind and you started teaching that also... Thank you for making videos..You explain everything very crystal clear..😇
Glad I could help, Vivek!
This was the only Tailwind CSS tutorial to actually get me what I need and then I realize I did not write the output css file right took awhile but figured it out. Thank you!
This is the best 20 minutes I've spent on UA-cam in a long time. Thanks for making this great intro!
You're welcome!
@DaveGrayTeachesCode you have truly helped me learn CSS to a commendable level and now you're teaching me tailwinds. Thank you so much Boss. Get to meet you someday.
Glad to help!
This is insane, the amount of value you drop for free man. You're literally an angel
You're welcome!
From htm css and Js and now tailwind I have been your fan. Thank you so much Dave you are the the real definition of a Teacher ❤
Never user Tailwind before, but if it was up to me to decide I would choose Tailwind over Bootstrap or any other css frameworks just because their classes are easier to remember for someone who spent most of his time using vanilla css
Thanks Dave!
It is an easier transition for sure! Thank you, Ahmad! 💯
@@DaveGrayTeachesCode I got 3 warings in my style.css file ? This is weird because MR. Gray you had only one and also your lignes are 552 and mine are 556
Best free web dev stuff on youtube right now honestly. Just a btw for people installing node, I would recommend you use nvm to install. Had a few headaches when installing node directly, it messed up some dependencies in React. Probably because I was using create react app though
As other Dave's tutorials this tutorials is different from other youtube tutorials and has very useful approaches and tricks. Thanks!
Thank you for finally explaining Tailwinds in a way that i can actually understand and appreciate the power of it.
Glad I could help!
You should be awarded the best teacher in the world ❤
Inline Fold extension and all other tips. You nailed it !! Great channel ! thank you @Dave
Very welcome!
wow wow wow this is amazing you really helped anyone needs to be full stuck web developer, really i have not watched this vedio yet because i am still watching and learning your css 11hours vedio, i will be right back this amazing tutorial when i complete that vedio thanks again from somalia 🇸🇴 😀
Good idea, Mohammed! I agree with completing the CSS fundamentals first.
note:
'inline fold extension' for replacing the long lenght classes for three dots.
minute: 21:00
Im so happy actually! Besides explaining tailwind and how to install, you also gave some very handy tricks on how to work with VSC itself
hi Dave, this is the first time I am here and I really loved this intro to Tailwind video - I loved the pace and nice bulls eye example which was some concrete enough for me to practice on my own. I loved your energy and the way you introduces productivity tips like emmet shortcuts, VSCode extensions, etc. Thank you so much Dave.
Glad you enjoyed it!
Finally web developer university is back with bang🔥...can u make some advanced react playlist and nextjs playlist?
Always making more React content 💯 Next.js series in the works, too 🚀
@@DaveGrayTeachesCode Thanks for Nextjs
Let's appreciate the much he has done. It's not easy please.
@@brajagopalmukherjee1588 Alright. Try and buy him some Coffee. lol😁
Dev love coffee a lot and I will get him one he his too good
You are best instructor, thank you Mr.Dave
I hope this channel will hit 1M soon 😍
Thank you! Let's get to 100k first! 🚀
Just simply put the code, it works! thanks!
You're welcome!
I really loved this intro Dave! This really helped me get started with Tailwind CSS.
Great to hear!
Thanks so much ! love the energy when you are teaching, no time wasted
You're welcome!
Another great video, I started learning CSS from you three weeks ago, now I am very comfortable with the fundamentals, thanks for this great content Dave ❤
You're very welcome!
This is amazing! video tutorials explain it so well instead of reading how!
I hated tailwind css at first. I thought writing inline styles would make the code look messy but the more I know about it, the more I use it. I use it all the time now :D
I agree. It has been an easy transition from regular CSS.
I always stop on Dave's videos. Top notch.
A tailwind playlist will be great for e.g some complex custom components, components with position, some events included etc will be great help
Noted!
Hi Dave, thank you for this great video, so many details and tricks, a clear way explaining how to set up and more, I have learnt so much already and answered many questions!
I will keep watching and experimenting... Thank you B
twailwindcss is beautiful and the way you introduce it make it even easier thanks a lot Sir
You're welcome!
I like how you teach, you make it simple and add some ways to make it more easy...
Thank you! Glad to hear that!
Great. Glad to be seeing the new series from you. Thanks, looking to more videos on Tailwind. Consider discussing Tailwind components libraries like Taiwindcomponents Flowbyte
Thanks for the suggestions! 💯
I really enjoyed watching this tutorial, some of the other ones where a little confusing to me but not this one. Thanks!
Glad to hear that!
Eu gostei desta aula. Obrigado por proporcionar uma grande experiência de aprendizagem. Você ganhou um novo assinante.
Thank you!
Amazing video i can finally get started on tailwind css
This channel should cross million subs. Damn!!
Thank you!
Finally I have been waiting for this for a long time ♥️👌
Glad to help!
Relearning Tailwind CSS with Dave. Thanks
You're welcome! 💯
@4:45 I think maybe this is where the "Live Preview" extension shines. Also @20:21 VSC has a "Create Manual Folding Ranges from Selection" function that can be run per instance, so you can still see classes etc when you need them. Thanks for the tut👍
Good notes! Do you like the Live Preview extension better than Live Server? The folding ranges command from VS Code folds full lines of code which can be helpful, but it won't just hide the classnames for me like the Inline Fold extension.
@@DaveGrayTeachesCode I've been watching the LP extension grow. I'm not sure it's better (or even faster to load), but have a feeling MS will just merge it into the app - who knows. Good point with Inline Fold. thanks!
Thank you Dave for this amazing tutorial 😁
Hi Dave. thank you for the great video! Would it be possible to do a video on the T3 stack? thank you
Thanks for the request!
Practical tutorials, useful extentions recommendation thank you so much
You are welcome!
its great ....now its been working......thank you Dave
Finally 🎉 can’t wait for next tailwind video
Coming soon!
😍 let chil and enjoy the contents, as usual your are doing great work here. Am going to save everything for vacations and enjoy every minute love your lesson.
Great plan! 🌴💯
Just awesome bro...good understanding and very impressive. Thank you
You are most welcome!
Good video Dave as always , i was using Sass and Styeld components and then changed to tailwind and i can tell that its really cool and as you mentioned about mobile first .
Thanks, Sam!
The things I like about tailwind is that it's mobile first and really easy to make responsive designs!
Absolutely! That will be demonstrated during the upcoming project 💯🚀
The long wait is finally over🤩
Happy to help!
I Love You, Sir. I don't known how can I thank you enough.
You are most welcome!
❤
Wow this is really amazing. thanks Dave.
.
one more thing, i really suggest after at the end, you add two or three project templates design with tailwind including the techNotes project.
You're welcome! Good suggestions! I've got a couple of projects in mind for this series, but converting the techNotes project might be a good additional one, too!
Amazing as always! 👏🏼👏🏼
Thank you! Cheers!
Hello Dave , thank u for u awesome tutorials
i think you my best discovery this year
Thank you for the kind words! 🙏
Thanks for the series sir, would definitely take a look at it after I complete learning JavaScript. One suggestion, it would be great if you make the videos project based.
Much needed playlist, let's go 😃
🚀🚀🚀
Great video as always, thank you!
Glad you enjoyed it!
best tutorial ever, thanks Dave
Glad it was helpful!
thanks Dave created such an awesome content
Glad you enjoyed it
Great course. Love to see more tailwind videos.
More to come!
Greate tutorial Dave you are awesome ! :P
Thanks!
You are unstoppable!
Thank you, John! 💯
Thank you so much for making this course
You're very welcome!
OMG THANKS SO SO MUCH THIS HELPED!!!
Glad to hear that!
I dont understand why the Documentation does not show how to add tailwind to a normal html file they all force you to sue some framework like NExt or React, this is so much simpler thank you very much!!
Thank you so much.... I am waiting for this
You're welcome! 💯
Again and again and again, thank you
You're welcome!
Thanks for you explanation.
Can't I just add the CDN and Just type the classes?
5:20 After you typed in "npx tailwindcss init"
consule will spit out fallowing :
"Need to install the following packages:
tailwindcss@3.3.2
Ok to proceed? (y) "
type y - it will install tailwind to your machine. Just one step Dave missed .
This should help: www.microverse.org/blog/javascript-library-vs-javascript-frameworks-the-differences
Thanks for sharing your great tutorials :D please keep up your works. again, Thanks alot :D
Thanks, will do!
Thank you so much teacher, the lessons was so interestings
Wow!! Just wow.
Thanks buddy
Welcome!
Thanks, Dave! 🙏🏽
Welcome!
Hi Dave, Awesome ,I think its time to start a project base video on TYPESCRIPT with REACT,Please we are eagerly waiting ,Lot of fellow developers agree with me.❤❤❤❤
Thanks Regi!
This is so awesome 🔥
Thank you! 🚀
BEST!!! Thank YOU!!!💪
You're welcome!
Possible stupid question - did I miss how we INSTALL Tailwind? I get the init but don't we have to install before that with an npm command? Apologies if I missed this somehow (duh)🤷♂
Very nice introduction. Your voice reminds me of newman.
thank you very much! Very interesting
Thanks so much. Quick question: how do you get it so that you can write the html elements and class names with the dot notation? div.grid.shadow etc. Thanks again
That is a feature of Emmet which is built into VS Code.
Great video. Thanks.
You are welcome!
However, ideally, you should move your HTML files to a source folder (like src or public) and then configure Tailwind to scan those files. This will keep your setup more organized. I tried following your approach it didn't work im getting this error: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
Thanks Dave
very good
perfect
Welcome!
Dav love you man
Thank you!
I can't get the vscode tailwind intellisense to work... Have uninstalled and installed multiple times. Nothing shows up when I hover. Any ideas what might be wrong?
Спасибо большое за труд!
good work mr dave,but are you gonna be doing this with vite
Thanks Dave
You're welcome!
you are smart please make viedo to build project i.e fullstack project (real world project)
Thank you. I already have. A full stack real world project is advanced. Make sure you know the pre-requisites I mention before attempting this: ua-cam.com/video/CvCiNeLnZ00/v-deo.html
Thank you for this
You're welcome, Siddiq!
when I used npx at the start for some reason it made a tailwind.config.scss file but then I did it a second time and it made the config.js file Just curious if that's something new since this video was made or if I mistyped something
Awesome thank you very much
You're welcome, Sona!
Hello Dave, I see that when u save your html file, the --watch tailwind rebuild your style.css file, and you were able to see the changes using live server. In my case, when i save my html file, nothing happens until i save my ./src/input.css or the tailwind config file.
I was watching for solution: install postcss-cli, use the mode:'jit' inside the tailwind config file... but nothing helps.
If u have a second, it will be nice to get some help.
Hello again, If u were wondering, what is the problem: just the file name. I named the file "tailwind_course (Dave Gray)". I guess this space between, or the "()" gives me the error.
Thank you for you tutorial! It was easy to follow. By the way, do I always have to install the tailwindconfig file If i would start another project?
You will need a config file. I suppose you could always copy over settings you prefer from a previously used config file if that is what you mean?
Great intro to Tailwind CSS. Thanks, Dave
{2023-03-11}, {2024-04-22}
You are welcome!
Amazing videos. watched from start to finish (you explain it better than any other video (perhaps even tailwind themselves) I have a question regarding the config file, Tailwind notes state 'src' in the path added to the content ["./src/**/*.{html,js}"] and you use "build". Are both right ?
Yes, it depends on where your html file is - which might depend on what you are building your project with. If you look at the GitHub repo for this video, you will see my index.html is in my build directory. Tailwind needs to read the classes inserted into that file to generate the CSS that is used. If I was building with Next.js, I might want it to look in my src directory for js, jsx, ts, or tsx files instead.
Thanks Dave, Excellent stuff. Going to work my way through your other videos. If you have a paid course I would be interested.@@DaveGrayTeachesCode
The first div doesnt display anything
I have warnings from lockdown-install.js
like this :Removing intrinsics.%TypedArrayPrototype%.with
Oo Dave is the best
🙏🙏🙏