I got a client who wanted TW CSS for his project and I knew absolutely zero about it. Tysm for this tutorial! It was a great welcomer and propeller for Tailwind css. Now I can face the project head-on w no worries!
But what if u wanna use the same CSS on different pages. If u have a series of pages like a online store where the template/css might actually be the same in different pages. Wouldnt it be hard to write again and again
Great question! That's why tailwindcss pairs well with a framework like react.js. In which case you would define a reusable component so you write the styles once and use them on any page!
In VS Code on Windows you hold down CTRL and hit the backtick key (upper left corner of the keyboard, next to the 1 key). On Mac you hold down the CMD key and hit the backtick key. Bash will only be available on a Linux based terminal. That means Linux, MacOS or WSL in Windows. However, you don’t need Bash to run Vite. You just need to make sure Node.js is installed in your computer.
Great video James! However I was wondering why in this video you install TailwindCSS with Vite but in your roadmap notes It’s just plain TailwindCSS that is linked? Are they different?
Great question! So the way I like to think about Vite is that it's a tool that helps us setup and configure our projects so that we can use NPM with them (node package manager). That allows us to easily install packages and extensions like tailwindCSS and then use them in our project :P In short, if we setup our project using Vite, then it's really easy to add TailwindCSS so that we can use it in our code!
Great questions - basically when you create these projects using vite for example, they come with a demo app, so a prebuilt website that advertising the tech (vite in this case). You could repurpose them if your application had a similar purpose to their app, but in most cases we want a blank canvas to get started and will delete them!
Not everyone starts from the same knowledge base as you might have - I try to make my videos as beginner friendly as possible and as such, I include beginner material. Calling it filler material shows your inability to consider and cater to others learning needs. I also disagree with your perspective about how learn x and y videos should work - if anything it highlights that you're probably not a very good teacher. Next time you have feedback, please try to share it in a more constructive manner.
I see you changed the title. Was literally gonna call you out 🤣🤣 you barely touched the surface of Tailwind. I think to become a Tailwind "god" is to be able to understand how to structure your Tailwind. Similar to how Shadcn does it and knowing how to create modularity but retain customizability. Anyway, just an idea for you to cover if you wanna dive deeper past the basics.
Hey bro :P I think you're confusing the videos as this title hasn't changed! This is a beginner TailwindCSS tutorial and it designed to get people up and running with it - then you can go into the advanced version which is linked in the description below. I did however make a god mode CSS video though which is what I assume you're referring to!
No. This is way too fast. I've already had lessons on Tailwind so I knew what I was doing but even so I was just copying what you were wrtiting and not really comprehending anything. If you have any prior knowledge, I'd actually suggest you to take a good look at the html and write your own tailwind first, then compare with the video.
Simple, Precise, To the point. The shortest, easiest way to learn tailwind
I got a client who wanted TW CSS for his project and I knew absolutely zero about it. Tysm for this tutorial! It was a great welcomer and propeller for Tailwind css. Now I can face the project head-on w no worries!
All the best for your projects! 😉
the best and fastest content out there for new front-end developers bro. Keep it up!
Cheers my broski :P
Loving the WoT collection in the background! haha
But what if u wanna use the same CSS on different pages. If u have a series of pages like a online store where the template/css might actually be the same in different pages. Wouldnt it be hard to write again and again
Great question! That's why tailwindcss pairs well with a framework like react.js. In which case you would define a reusable component so you write the styles once and use them on any page!
Woah there Doug, I’m clicking it…..easy.
how do i open the bash thing ( terminal ) ?
In VS Code on Windows you hold down CTRL and hit the backtick key (upper left corner of the keyboard, next to the 1 key).
On Mac you hold down the CMD key and hit the backtick key.
Bash will only be available on a Linux based terminal. That means Linux, MacOS or WSL in Windows. However, you don’t need Bash to run Vite. You just need to make sure Node.js is installed in your computer.
@@ragtop63 thanks :)👍
Great video James! However I was wondering why in this video you install TailwindCSS with Vite but in your roadmap notes It’s just plain TailwindCSS that is linked? Are they different?
Great question! So the way I like to think about Vite is that it's a tool that helps us setup and configure our projects so that we can use NPM with them (node package manager). That allows us to easily install packages and extensions like tailwindCSS and then use them in our project :P In short, if we setup our project using Vite, then it's really easy to add TailwindCSS so that we can use it in our code!
Whats the software on the left? On the beginning i mean, The "github2 -- bash" thingy
Hold off, I'm liking it... I'm liking it 😅
No pressure :P haha
I was also wondering why you deleted the counter.js and main.js files and if for other projects you might keep them?
Great questions - basically when you create these projects using vite for example, they come with a demo app, so a prebuilt website that advertising the tech (vite in this case). You could repurpose them if your application had a similar purpose to their app, but in most cases we want a blank canvas to get started and will delete them!
Great tutorial! is it true that for beginners it is better to know good old CSS before jumping into Tailwind?
Don't skip CSS. You have to know it before starting learning more abstract things like Tailwind.
are you hinting something about crystal meth ?
I don't believe in luck, curse me if you dare, doug!
me who's not good at css and learning tailwind 😵💫
Haha I have a CSS tutorial that could help you then!
don't learn and memorize css. practice it
I laughed when I miss heard crystal math. :D
Every one who knows basic html css start the video from 5:30
And Learn x in y minutes of video should not contain these fillers
Not everyone starts from the same knowledge base as you might have - I try to make my videos as beginner friendly as possible and as such, I include beginner material. Calling it filler material shows your inability to consider and cater to others learning needs.
I also disagree with your perspective about how learn x and y videos should work - if anything it highlights that you're probably not a very good teacher.
Next time you have feedback, please try to share it in a more constructive manner.
Crytal match you watched to many breaking bad XD
I see you changed the title. Was literally gonna call you out 🤣🤣 you barely touched the surface of Tailwind. I think to become a Tailwind "god" is to be able to understand how to structure your Tailwind. Similar to how Shadcn does it and knowing how to create modularity but retain customizability. Anyway, just an idea for you to cover if you wanna dive deeper past the basics.
Hey bro :P I think you're confusing the videos as this title hasn't changed! This is a beginner TailwindCSS tutorial and it designed to get people up and running with it - then you can go into the advanced version which is linked in the description below. I did however make a god mode CSS video though which is what I assume you're referring to!
@@Smoljamesomg! Woops 😂😂
No. This is way too fast. I've already had lessons on Tailwind so I knew what I was doing but even so I was just copying what you were wrtiting and not really comprehending anything. If you have any prior knowledge, I'd actually suggest you to take a good look at the html and write your own tailwind first, then compare with the video.