Learn TailwindCSS in 23 minutes

Подписаться 31 тыс.

Просмотров 1,8 тыс.

50% 1

Learn to Code 🔥 www.smoljames.com/roadmap
In this beginner friendly tutorial we learn TailwindCSS by taking a boring webpage and styling it with TailwindCSS to make it look amazing!
#CSS #coding #programming #tailwindcss
🔗 Resources
GitHub Code - github.com/jamezmca/crystal-m...
(COPY THE TEMPLATE FROM THERE)
Init TailwindCSS - tailwindcss.com/docs/guides/vite
TailwindCSS Advanced - • Advanced TailwindCSS T...
⭐️ All my links!
www.smoljames.com
💛 Support the channel
/ @smoljames
🏆 Shop the merch
www.store.smoljames.com
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
📚 Chapters
00:00 Intro
00:39 Init project
05:18 TailwindCSS go BRRR
🔖 Topics Covered
- Learn TailwindCSS
- Build a web page with TailwindCSS
- Create a TailwindCSS project
- How to use TailwindCSS

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 13

@awakenwithoutcoffee Месяц назад

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

@Smoljames Месяц назад

Cheers my broski :P

@codernerd7076 3 месяца назад

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

@Smoljames 3 месяца назад

No pressure :P haha

@user-qb9bw5dm1d 2 месяца назад

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 2 месяца назад

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!

@buw_21 3 месяца назад

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

@Smoljames 3 месяца назад

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

@user-qb9bw5dm1d 2 месяца назад

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

@Smoljames 2 месяца назад

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!

@genshian 3 месяца назад

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 3 месяца назад

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 3 месяца назад

@@Smoljamesomg! Woops 😂😂