Learn TailwindCSS in 23 minutes

[@saltydawg8988]

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

[@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!

[@durgaprasaddas6494]

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

[@awakenwithoutcoffee]

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

[@Smoljames]

Cheers my broski :P

[@codernerd7076]

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

[@Smoljames]

No pressure :P haha

[@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.

[@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!

[@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

[@techsuvara]

I laughed when I miss heard crystal math. :D

[@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!

[@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!

[@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

[@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 :)👍

[@bollvigblack]

are you hinting something about crystal meth ?

[@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 😂😂