Learn TailwindCSS in 23 minutes

[@durgaprasaddas6494]

Simple, Precise, To the point. The shortest, easiest way to learn tailwind

[@Swiftwebber7]

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!

[@lukas.webdev]

All the best for your projects! 😉

[@Smoljames]

Love to hear it home slice :)

[@awakenwithoutcoffee]

the best and fastest content out there for new front-end developers bro. Keep it up!

[@Smoljames]

Cheers my broski :P

[@chillbro2275]

Thanks man. This was helpful to get initiated.

[@beansynz]

Loving the WoT collection in the background! haha

[@aloshraam5000]

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

[@Smoljames]

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!

[@codernerd7076]

Hold off, I'm liking it... I'm liking it 😅

[@Smoljames]

No pressure :P haha

[@CodyGilreath-k1v]

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?

[@Smoljames]

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!

[@saltydawg8988]

Woah there Doug, I’m clicking it…..easy.

[@PetePatron]

Looks like new vite now creates style.css inside src/style.css instead of ./style.css so make sure you update the head/link tag to the stylesheet to from href="style.css" to href="src/style.css"

[@Hikhorn]

Thank you for your note. Really helped.

[@zackisbell]

Thank you sir! You saved me a lot of time and what's left of the hair on my head.

[@HamzaMao]

Thank you so much

[@CodyGilreath-k1v]

I was also wondering why you deleted the counter.js and main.js files and if for other projects you might keep them?

[@Smoljames]

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!

[@sgomez8194]

Great tutorial! is it true that for beginners it is better to know good old CSS before jumping into Tailwind?

[@aogava]

Don't skip CSS. You have to know it before starting learning more abstract things like Tailwind.

[@AlessiaCaraFans]

i did all teh steps till 8:50 but the tailwind style isn't applied pls why

[@Smoljames]

hmmm if you screenshot your project directory and create an issue on the github repo I can have a look and see if I can figure out what's not working for you :)

[@AlessiaCaraFans]

i had a src/ folder and i had to change path for style.css

[@AlessiaCaraFans]

@@Smoljames thanks James , i actually found the issue hh it was the path of style.css in index.html supposed to point to src/style.css

[@Smoljames]

@@AlessiaCaraFans Nicely done :D

[@AlessiaCaraFans]

hey james tha,ks , can you please make a video about how to start getting part time job for beginners ,or how to make profitable saas and how can we market them ?

[@King_Hodop]

I don't believe in luck, curse me if you dare, doug!

[@i-N-k-Primus]

Whats the software on the left? On the beginning i mean, The "github2 -- bash" thingy

[@marshallatkins1]

That’s the Unix terminal

[@aloshraam5000]

how do i open the bash thing ( terminal ) ?

[@ragtop63]

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.

[@aloshraam5000]

@@ragtop63 thanks :)👍

[@devsuvara]

I laughed when I miss heard crystal math. :D

[@buw_21]

me who's not good at css and learning tailwind 😵‍💫

[@Smoljames]

Haha I have a CSS tutorial that could help you then!

[@bollvigblack]

don't learn and memorize css. practice it

[@marshallatkins1]

Same I hate CSS lol

[@buw_21]

after months I can now say I'm not good with css but I'm good and more comfortable with tailwind 😅

[@bollvigblack]

are you hinting something about crystal meth ?

[@xyznikk]

im not even gonna lie everyone knows its NOT about math 😭🙏

[@mintz347]

Crytal match you watched to many breaking bad XD

[@genshian]

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.

[@Smoljames]

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!

[@genshian]

@@Smoljamesomg! Woops 😂😂

[@Sourav9063]

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

[@Smoljames]

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.

[@aysenuronaran726]

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.