Tailwind CSS Introduction, Basics & Guided Tutorial
Vložit
- čas přidán 30. 06. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this Tailwind CSS Introduction, Basics & Guided Tutorial, you will learn what Tailwind CSS is, what you need to use Tailwind CSS, how to setup Tailwind CSS and create an example Tailwind CSS project.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- The Complete Web Designer: bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Tailwind CSS Course: github.com/gitdagray/tailwind...
🔗 Playlist for this Tailwind CSS Course: bit.ly/3BKYrzg
Tailwind CSS Introduction, Basics & Guided Tutorial
(00:00) Intro
(00:05) Welcome
(00:14) What is Tailwind CSS?
(01:27) Course Prerequisites
(01:49) Web Dev Tools & Settings
(04:50) Tailwind CSS Config file
(07:13) input.css file
(09:00) Compile the style.css file
(11:13) Compiling with --watch
(12:46) Starting Live Server
(13:31) Tailwind CSS Intellisense
(14:50) Using Tailwind docs to find class names
(16:51) Creating a bullseye with Tailwind
(18:01) Adding a custom class to input.css
(19:47) Handling class clutter in your HTML
📚 Suggested Pre-requisites for this Tailwind CSS course:
🔗HTML for Beginners full course: • HTML Full Course for B...
🔗CSS for Beginners full course: • CSS Full Course for Be...
📚 Tutorial References:
🔗 Tailwind CSS: tailwindcss.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Node.js: nodejs.org/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 Tailwind CSS Intellisense VS Code Extension: marketplace.visualstudio.com/...
🔗 Inline Fold VS Code Extension: marketplace.visualstudio.com/...
Was this tutorial on Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments.
#tailwind #css #introduction
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: czcams.com/video/n4R2E7O-Ngo/video.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
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 ❤
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!
This is the best 20 minutes I've spent on CZcams in a long time. Thanks for making this great intro!
You're welcome!
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!
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!
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!
Inline Fold extension and all other tips. You nailed it !! Great channel ! thank you @Dave
Very welcome!
As other Dave's tutorials this tutorials is different from other youtube tutorials and has very useful approaches and tricks. Thanks!
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!
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
This is amazing! video tutorials explain it so well instead of reading how!
I really loved this intro Dave! This really helped me get started with Tailwind CSS.
Great to hear!
Thank you Dave for this amazing tutorial 😁
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
Thank you for finally explaining Tailwinds in a way that i can actually understand and appreciate the power of it.
Glad I could help!
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 😂
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!
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! 💯
Amazing video i can finally get started on tailwind css
@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!
You are best instructor, thank you Mr.Dave
I hope this channel will hit 1M soon 😍
Thank you! Let's get to 100k first! 🚀
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!
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.
Eu gostei desta aula. Obrigado por proporcionar uma grande experiência de aprendizagem. Você ganhou um novo assinante.
Thank you!
its great ....now its been working......thank you Dave
Finally I have been waiting for this for a long time ♥️👌
Glad to help!
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!
Amazing as always! 👏🏼👏🏼
Thank you! Cheers!
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!
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 video as always, thank you!
Glad you enjoyed it!
Just awesome bro...good understanding and very impressive. Thank you
You are most welcome!
Great course. Love to see more tailwind videos.
More to come!
Thanks for you explanation.
thank you very much! Very interesting
Practical tutorials, useful extentions recommendation thank you so much
You are welcome!
Hello Dave , thank u for u awesome tutorials
i think you my best discovery this year
Thank you for the kind words! 🙏
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! 💯
Greate tutorial Dave you are awesome ! :P
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.
Great plan! 🌴💯
Thank you so much teacher, the lessons was so interestings
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.
Thanks for sharing your great tutorials :D please keep up your works. again, Thanks alot :D
Thanks, will do!
Much needed playlist, let's go 😃
🚀🚀🚀
Great video. Thanks.
You are welcome!
Thank you so much.... I am waiting for this
You're welcome! 💯
thanks Dave created such an awesome content
Glad you enjoyed it
This is insane, the amount of value you drop for free man. You're literally an angel
You're welcome!
twailwindcss is beautiful and the way you introduce it make it even easier thanks a lot Sir
You're welcome!
Finally 🎉 can’t wait for next tailwind video
Coming soon!
OMG THANKS SO SO MUCH THIS HELPED!!!
Glad to hear that!
Thank you so much for making this course
You're very welcome!
Thanks, Dave! 🙏🏽
Welcome!
Again and again and again, thank you
You're welcome!
Thanks Dave
very good
perfect
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!
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
Wow!! Just wow.
Thanks buddy
Welcome!
Спасибо большое за труд!
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!
I always stop on Dave's videos. Top notch.
Awesome thank you very much
You're welcome, Sona!
This is so awesome 🔥
Thank you! 🚀
best tutorial ever, thanks Dave
Glad it was helpful!
BEST!!! Thank YOU!!!💪
You're welcome!
Relearning Tailwind CSS with Dave. Thanks
You're welcome! 💯
This channel should cross million subs. Damn!!
Thank you!
Thanks Dave
You're welcome!
Thank you for this
You're welcome, Siddiq!
The long wait is finally over🤩
Happy to help!
Dav love you man
Thank you!
Just simply put the code, it works! thanks!
You're welcome!
You are unstoppable!
Thank you, John! 💯
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?
Very nice introduction. Your voice reminds me of newman.
I Love You, Sir. I don't known how can I thank you enough.
You are most 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.
good work mr dave,but are you gonna be doing this with vite
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!
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 💯🚀
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
You're welcome!
thank you!!!!!!!!!!!!!!!!!!!!
Welcome!
Oo Dave is the best
🙏🙏🙏
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.
@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!
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
👍👍👍👍👍👍 Coooool!!!!❤
🙏🙏🙏
note:
'inline fold extension' for replacing the long lenght classes for three dots.
minute: 21:00
waiting for upcoming video. good content as always. when will be the next video out
Thank you! Tuesdays and Fridays 💯🚀
Please continue
Will do!
Hi dave, i recently finished your HTMLcourse and i am currently on your CSS video. My concern is im in the middle between tailwind and bootstrap and don't know which one to choose after my css course, do you have any suggestions? (I will be focusing heavily on front-end development so i heard tailwind would be better suited for my case but still not sure.)Thank you in advance!
Both are good. Pick one now and learn the other one after. Bootstrap has been around longer and has more legacy code deployed - but Tailwind is a great modern choice and more companies are moving towards 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: czcams.com/video/CvCiNeLnZ00/video.html
super love your tutorials!! very helpful for beginners, really wanna go through all your classes~
just wondering, do you have any plan to make TS tutorial series, I stuck here many times when I'm using it in react🥲 need someone to save me🥲🥲🥲
I have a Typescript for Beginners series coming right up! 💯
wao, I see you put the link of ZTM in the description. Are you cooperating with them? If that so, what a great news! Hope to see your course on ZTM platform 😄
I think they offer good courses and if you use my links to ZTM, you help support my channel. I have not been asked to create a course for them - yet. 😀 Maybe someday!
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.
Teacher, after this series, can you do a series about NextJs, thanks ❤❤
Both Typescript and Next.js are on my short list. 💯🙏
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