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: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.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
@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.
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!
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 🇸🇴 😀
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, 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.
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
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!
@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!
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 ❤
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 .
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 .
😍 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.
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: th-cam.com/video/CvCiNeLnZ00/w-d-xo.html
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!!
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
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.❤❤❤❤
SUCCESSES ... thank you very much I'll start to see it a query is there a way to unite tailwind with styled-components ?? Greetings from Venezuela att. Joseph Grillo español SUCCESSES ... thank you very much I'll start to see it a query is there a way to unite tailwind with styled-components ?? Greetings from Venezuela att. Joseph Grillo
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)🤷♂
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?
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.
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.
Yeah, that's not quite right. "build" like that will refer to your package.json script. To better understand, here's a quick article on it: dev.to/codesphere/how-to-setup-and-start-using-tailwind-2khk
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.
Hay man, so i did the first part as you did downloading the things then as soon as i get the terminal up the opening line is different and when i type what you type it gives me An error. idk if that is because im on windows could you possibly make a video on how to set visual studio code yo properly
@@DaveGrayTeachesCode thank you so much i will defantly i am verry new to this and stuff just was not working. But i figerd out what the problem was thanks man ;)
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: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.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
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
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 😂
This is the best 20 minutes I've spent on TH-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 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!
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
As other Dave's tutorials this tutorials is different from other youtube tutorials and has very useful approaches and tricks. Thanks!
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!
note:
'inline fold extension' for replacing the long lenght classes for three dots.
minute: 21:00
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
You should be awarded the best teacher in the world ❤
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 ❤
This is insane, the amount of value you drop for free man. You're literally an angel
You're 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.
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
Inline Fold extension and all other tips. You nailed it !! Great channel ! thank you @Dave
Very welcome!
Just simply put the code, it works! thanks!
You're welcome!
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.
Thank you for finally explaining Tailwinds in a way that i can actually understand and appreciate the power of it.
Glad I could help!
twailwindcss is beautiful and the way you introduce it make it even easier thanks a lot Sir
You're welcome!
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
I like how you teach, you make it simple and add some ways to make it more easy...
Thank you! Glad to hear that!
Eu gostei desta aula. Obrigado por proporcionar uma grande experiência de aprendizagem. Você ganhou um novo assinante.
Thank you!
This is amazing! video tutorials explain it so well instead of reading how!
I always stop on Dave's videos. Top notch.
Amazing video i can finally get started on tailwind css
You are best instructor, thank you Mr.Dave
I hope this channel will hit 1M soon 😍
Thank you! Let's get to 100k first! 🚀
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!
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!
I really loved this intro Dave! This really helped me get started with Tailwind CSS.
Great to hear!
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
Thanks so much ! love the energy when you are teaching, no time wasted
You're welcome!
This channel should cross million subs. Damn!!
Thank you!
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!
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!
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! 💯
Relearning Tailwind CSS with Dave. Thanks
You're welcome! 💯
its great ....now its been working......thank you Dave
Hello Dave , thank u for u awesome tutorials
i think you my best discovery this year
Thank you for the kind words! 🙏
Thank you Dave for this amazing tutorial 😁
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!
Practical tutorials, useful extentions recommendation thank you so much
You are welcome!
Just awesome bro...good understanding and very impressive. Thank you
You are most welcome!
Finally 🎉 can’t wait for next tailwind video
Coming soon!
@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!
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!
I Love You, Sir. I don't known how can I thank you enough.
You are most welcome!
❤
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 💯🚀
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!
Finally I have been waiting for this for a long time ♥️👌
Glad to help!
Greate tutorial Dave you are awesome ! :P
Thanks!
Great course. Love to see more tailwind videos.
More to come!
OMG THANKS SO SO MUCH THIS HELPED!!!
Glad to hear that!
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
😍 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! 🌴💯
best tutorial ever, thanks Dave
Glad it was helpful!
Thank you so much teacher, the lessons was so interestings
Thanks for you explanation.
Thank you so much.... I am waiting for this
You're welcome! 💯
thanks Dave created such an awesome content
Glad you enjoyed it
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: th-cam.com/video/CvCiNeLnZ00/w-d-xo.html
Again and again and again, thank you
You're welcome!
The long wait is finally over🤩
Happy to help!
Thank you so much for making this course
You're very welcome!
Great video as always, thank you!
Glad you enjoyed it!
thank you very much! Very interesting
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.
Thanks for sharing your great tutorials :D please keep up your works. again, Thanks alot :D
Thanks, will do!
Amazing as always! 👏🏼👏🏼
Thank you! Cheers!
Very nice introduction. Your voice reminds me of newman.
Much needed playlist, let's go 😃
🚀🚀🚀
Wow!! Just wow.
Thanks buddy
Welcome!
Great video. Thanks.
You are welcome!
You are unstoppable!
Thank you, John! 💯
Thanks Dave
very good
perfect
Welcome!
BEST!!! Thank YOU!!!💪
You're welcome!
Thanks, Dave! 🙏🏽
Welcome!
This is so awesome 🔥
Thank you! 🚀
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!!
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.
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!
Спасибо большое за труд!
Awesome thank you very much
You're welcome, Sona!
Thank you for this
You're welcome, Siddiq!
waiting for upcoming video. good content as always. when will be the next video out
Thank you! Tuesdays and Fridays 💯🚀
Thanks Dave
You're welcome!
SUCCESSES ... thank you very much I'll start to see it
a query is there a way to unite tailwind with styled-components ??
Greetings from Venezuela
att. Joseph Grillo
español
SUCCESSES ... thank you very much I'll start to see it
a query is there a way to unite tailwind with styled-components ??
Greetings from Venezuela
att. Joseph Grillo
Two different things - styled-components allows writing CSS in JS. Tailwind CSS uses predefined class that you write in your HTML.
good work mr dave,but are you gonna be doing this with vite
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?
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)🤷♂
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?
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
Can't I just add the CDN and Just type the classes?
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.
Dav love you man
Thank you!
The command @9.52 isn't working for me. I had to run `npx tailwindcss build ./src/input.css -o ./build/css/style.css` instead
Yeah, that's not quite right. "build" like that will refer to your package.json script. To better understand, here's a quick article on it: dev.to/codesphere/how-to-setup-and-start-using-tailwind-2khk
@@DaveGrayTeachesCode Thanks for clarifying. I must've done something wrong on my end then
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.
Hay man, so i did the first part as you did downloading the things then as soon as i get the terminal up the opening line is different and when i type what you type it gives me An error. idk if that is because im on windows could you possibly make a video on how to set visual studio code yo properly
I'm using git bash for my terminal. Install git (comes with git bash) here: git-scm.com/downloads
@@DaveGrayTeachesCode thank you so much i will defantly i am verry new to this and stuff just was not working. But i figerd out what the problem was
thanks man ;)