Learn Tailwind CSS - Course for Beginners

This course will give you a full introduction into all of the core concepts of Tailwind CSS - it will also provide details on every features that provides Tailwindcss.
Course from @codewithguillaume .
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:36) Setup
⌨️ (0:17:01) Colors
⌨️ (0:29:11) Customization
⌨️ (0:42:11) Typography
⌨️ (1:05:21) Spaces & sizes
⌨️ (1:29:36) Flex
⌨️ (1:51:46) Grids
⌨️ (2:12:48) Layouts
⌨️ (2:37:49) Borders
⌨️ (2:45:41) Effects & filters
⌨️ (2:57:33) Animations
⌨️ (3:08:28) Design System
⌨️ (3:56:31) Core concepts
⌨️ (4:05:26) Dark mode
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@codewithguillaume]

Thanks to @freecodecamp to share this course ! Hope you'll enjoy and learn everything you have to know about Tailwindcss :) Best, Guillaume

[@YaSiRaRaFaTdoTNet]

Sincere thanks to you for this community effort!

[@timetocode_with_ali]

Great video Guillaume!! 🎉

[@codewithguillaume]

@@timetocode_with_aliyay!!! Thank you Ali ❤ it makes me so happy coming from you 😂

[@codewithguillaume]

@@YaSiRaRaFaTdoTNetthanks my friend !

[@officialcodingnotes]

This is a great course. Tailwind is an amazing CSS framework and this course literally teaches one everyting one needs to know.

[@user-wi2ir1df3y]

Thanks for free courses. Knowledge should be available to everyone. By lightning a fire from a candle, you are not stealing the fire, you are spreading the light. Light of knowledge.

[@codewithguillaume]

Hope you'll enjoy :)

[@mishanya6921]

Русский:)

[@potatopower2144]

When he said "coostomize", I knew this was legit. Guess it's time to learn tailwind

[@codewithguillaume]

😂 I’ll try to improve my accent !

[@maxralph01]

Lol. The French, especially from Paris are the best front-end designers. They are magicians over there, even with their lower wages.. Anytime I hear it is French, I already know it is the best in the world, unmatched!!!! Hats off, Guillaume.

[@Freezens]

hahahahaha

[@nxone9903]

More like cyustom

[@IrishArchives]

@@codewithguillaume You're fantastic. Thank's for doing this

[@officialcodingnotes]

I learned Tailwind a good time ago and it has sped up my coding by a lot. Everyone should at least know that Tailwind exist. It might not be the perfect option for everyone , but for me it definitely works.

[@jamessudimak1696]

Just want to say that this course not only made me 1000% more comfortable with frontend (my strong suit was in backend), but it also helped me build out and test these practices into my own personal portfolio, which then helped me land a great job not too long after. No joke! I think Tailwind is an absolute must in this industry. It makes building frontend interfaces exponentially more efficient, and it's easy to understand and has some excellent documentation. Folks, this course is EXTREMELY valuable to say the very least. And the fact that it's FREE is incredible. Thank you Guillaume!!! I owe a lot to you

[@codewithguillaume]

Hello James, thank you so much my friend I really appreciate it! Hope to see you soon !

[@MinhPham-eh6lr]

Thanks so much for providing such a well-explained tutorial!

[@Web-Dev-Codi]

You can see he is genuinely excited to teach. Lovely to watch and learn!

[@codewithguillaume]

Thank you my friend ! Absolutely I love to teach :)

[@kim92se64]

Never seen such a great video on TailwindCSS before !!! Awesome work !!!

[@palakbarman7038]

Awesome stuff, Guillaume! Your explanation is concise and easy to follow.. thanks for open-sourcing this course & sharing!

[@codewithguillaume]

Thank you my friend !

[@isaacsouza244]

Absolutely amazing. Thank you very much!

[@cuti9114]

😭😭😭just when i was looking for freecodecamp tailwind css course after learning next js they dropped this course.I cannot believe this.Thankyou i am going to start learning this course😍💜

[@ashleyhwang1206]

SAME

[@md.rashedulhaq8966]

same for me

[@codewithguillaume]

Enjoy :)

[@sidkapoor9085]

Good luck, tailwind is really easy to learn and much more convenient than regular css imo.

[@vasiovasio]

Synchronicity! :)

[@florinsx]

Really appreciate your enthusiasm. Thanks for this valuable info.

[@paternediedhiou5931]

This is a powerful course you have done. Thank you 🙏🙏🙏👍

[@codewithguillaume]

Thank you my friend !

[@riatec6741]

This is a great tutorial. Its 'applicability' that is described over the breadth of this video.. Thanks very much!!

[@chinazauchenna9645]

Love how simple and easy to understand this course is. Practically takes you through all the theories and technical jargons around Tailwind CSS, thereby making it easier for you to understand before heading out into practical coding. Thank you so much for this course @freecodecamp

[@fabrice9848]

Merci pour ce cours Guillaume. Your french accent is a treat.

[@JBuchmann]

To new developers.... please learn regular CSS as well as you can FIRST before you use things like Tailwind. You'll be a better dev for it. (and you'll be a more "hire-able" developer as an employee since most companies still use CSS or SCSS)

[@lukas.webdev]

Yes, 100% 😉

[@mohammedgomaa8851]

This is a great tutorial for someone who doesn't know CSS, personally I'd say if you already know CSS then just read Tailwind's docs and you're all set : )

[@martinmiz]

It's not recommended for someone to learn a framework before learning the vanilla program. Just like you shouldn't learn React before learning JavaScript, you shouldn't learn Tailwind before learning CSS. Actually, I would recommend learning Bootstrap first after CSS, then Tailwind because Tailwind is just an improvement of Bootstrap.

[@dipeshsaw09]

Sir your communication is amazing

[@luisjoseprofe]

This is a really useful video. Thank you very much!

[@dhrambiragarwal3520]

Oh wow I was waiting for this thank you very much

[@Felipe-pb9gu]

Excellent course! thanks

[@taponato1127]

this content is amazing thank you!

[@junwatu]

You are all the best! Thank You! 💖💖

[@yudazdk]

I learned a lot from this course. Thank Guillaume

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@user-qx8kb7xx9x]

Wow, I just opened documentation and here you are!

[@austinscott4695]

Wonderful timing

[@user-xj2vc1qk6p]

Thank you for the nice course!

[@antonioanerao]

You have a really good English for teaching. I'm not a native English speaker but I can easily understand everything you say. Thanks for the great course :)

[@ankushthapa1943]

Just what i needed. Thank you

[@codewithguillaume]

Enjoy and if you need anything do not hesitate

[@sastacollege5571]

sir you make my life so easy in css using Tailwindcss and your teaching style is out of the world THANK YOU SO MUCH 🙏🙏🙏🙏

[@sohailahakeem231]

Thanks for providing us with great explanation

[@IN-jl4rl]

amaaaaazing!)) Thank you very much! You encouraged me to contact tailwind team for improving)

[@skyy_banerjee]

Perfect timing! ❣️

[@codewithguillaume]

We didn’t do it on purpose but I think it’s time for people to make their own opinion

[@hellwraiz]

Was looking for a tutorial for this and I guess that this is my lucky day because a video about this is recommended yo me from my favourite youtuber!

[@codewithguillaume]

Wooow! Thank you so much my friend! More is coming soon 😊

[@JoaoSchoen]

Cool \o/ Tailwind changed how I work with CSS entirely, waaaaay better AND simpler then any other CSS technology

[@chipshit5584]

Always if you care to elaborate: Is it still worth to learn HTML/CSS in 2023? With all these sites offering 0 to low code website building? I personally think its 50/50. But would like to hear the opinion of somebody who maybe is a professional ? (If you work with css as you mentioned) :)

[@JoaoSchoen]

@@chipshit5584 I'm a full stack web developer, so I work with JS, TS, HTML, CSS, React/Angular, Node, MongoDB/SQL. I personally don't believe in low code because it has loads of limitations and I'm actually working right now in a project to extract and API from a low code program, because it ain't maleable enough for what a complex system requires. I'm also developing in my spare time a webscraping algorithm to get data from a website, and that requires me to know html/css.

[@JBuchmann]

@@chipshit5584 You really should build a good "foundation" for your development skills. The foundation of HTML, CSS, and Javascript. Get as good as you can in all 3. Only then should you branch out with CSS and JS frameworks. Especially if your goal is to be an employable developer. If you only can style stuff with Tailwind, but your job is using regular CSS or SCSS, then you're screwed. And if Tailwind eventually isn't the hot new thing anymore (some other CSS framework is) then that's not good either. And even when you only use Tailwind, it's still good to know what it's doing behind the scenes (for debugging)

[@standardio8270]

Wow I loved to see the full 4 hours.

[@MrFlakgorilla]

Thank you for this. I am using tailwindcss in my projects, but I have problems with making better looking, more responsive web pages. This video explains things in a different way and fills gaps I wasn't even aware of.

[@mohamadabdalhai7998]

does tailwind make responsive web design easier?

[@MrFlakgorilla]

@@mohamadabdalhai7998 definitely. Needs some getting used to tho

[@lukas.webdev]

I'm currently working on a video about Creating Responsive Design with Tailwind CSS and I will probably drop it next week - this should also be very helpful for you 😉

[@haibaidzokwomandre1468]

Merci beaucoup Mr Guillaume.

[@user-kw9nr8sd8c]

thanks for your amazing teaching and interesting courses

[@RJRobinsonX]

Wow. What a great intorduction to tailwind! 10/10 ( and no, I'm not talking about opacity )

[@varaprasad6531]

Thanks Guru, for this amazing content.

[@codewithguillaume]

No problem thanks to you!

[@myveritasforever]

French accent is so funny . 😅 I felt like I was cooking Tailwing Css

[@lukas.webdev]

😂

[@saeedmohomed]

This is what I what waiting for , Thank you free code camp ❤️❤️

[@codewithguillaume]

Enjoy my friend 🎉

[@ryeasv]

Perfect , Thanks

[@padthaizilla9165]

In a galaxy of KZbin content, this creation shines like a beacon on Coruscant, its author wielding clarity and wisdom as a Jedi wields a lightsaber. My journey in CSS, once strong in the Force but dormant for over a decade, has been reawakened by this masterful transmission. This is not merely content it's a holocron of knowledge, a guiding star in the vast digital cosmos. My gratitude echoes across the stars - a heartfelt shoutout to this master of the digital arts. Thank you for sharing this invaluable class, a true testament to the power of knowledge and teaching in our ever-expanding universe. May the force be with you ~

[@tears_falling]

perfect timing

[@jhlagado1]

Excellent work @codewithguillaume. This is a very good introduction to Tailwind

[@robertthaiya906]

I was thinking that today I should start learning tailwind and I WOKE UP TO THIS!!!! IF this is not a sign, I don't know what is. Thank you FreeCodeCamp!!!

[@codewithguillaume]

❤

[@RichReflectionz]

Haha same here, the last 2-3 days, I've been thinking more about tailwind, especially diving down the react and hearing many recommendations about it.

[@argamil8401]

What a great timing ahah

[@SertuncSELEN]

awesome teacher. thank you

[@abhirammenon9676]

great stuff!! awesome

[@rahimco-su3sc]

excelent tutorial , thanks you !!

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@lukas.webdev]

Great tutorial, Guillaume! Thanks for sharing - Tailwind is Awesome! 🔥 I also just posted a video about Tailwind (with React) and I've never enjoyed creating a video more then I did with this one... hope you had a blast as well. Keep it up 😉

[@mahendranath2504]

Thank you so much❤❤❤👍👋👏👌🙏🏻🫡🎊🤝🫰🏻🥳🙌🏻🎉🫡

[@Muhammad_Saleem]

Thanks for Share this course

[@mdyousufislam5812]

Thank you thank you so much, It's very helpful tutorial for all the Fron-End developers. I like your tutorial...

[@codewithguillaume]

Thanks my friend ! More coming soon on my channel

[@davidlafontant2973]

Merci Guillaume👍

[@ashankarunaratne3424]

Best tailwindCSS tutorial in the web

[@codewithguillaume]

Oh thanks my friend

[@faisalmushtaq2287]

Thanks alot!!!

[@hmthatsniceiguess2828]

Nice guide, one important note though, I've now learned that the use of @apply is considered very poor practice for many reasons, to the point where the creator of Tailwind has said that he wishes he didn't include it at all as a feature. Just something worth looking into.

[@thomasbasadonne723]

Do you use a snippet to rearrange the classes given to an HTML element? If yes, may I know which one? Great tutorial!

[@migueltrujillo3481]

Just what I need !!!!

[@codewithguillaume]

Tell me if it helped you!

[@hareesh.t920]

Best tailwind css course ever🥹🥹🥹💥💥💥

[@lilisupriyanto2345]

Thank you very much, Guillaume.

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@uminhtetoo]

Thank you so much for sharing.

[@codewithguillaume]

🎉🎉

[@zainulabideen5587]

Very informative.

[@eleuteriogarcia1225]

Thanks indeed!

[@cyril7104]

Thx for transforming docs into video:)

[@codewithguillaume]

I am also doing best practices shortcuts and own experience return 😊

[@shujaatali8414]

Thanks for such a great video

[@codewithguillaume]

Enjoy !

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@emporyzookin8524]

Wow this is literally what i was needed right now

[@codewithguillaume]

Good timing I guess 😅

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@teja34567]

yesterday's issue with tailwind css today we got course 😅, love you freecodecamp 😍😍

[@codewithguillaume]

No problem ❤

[@teja34567]

@@codewithguillaume your way of approach is awesome thanks for the tutorial.

[@RyuBateson218]

Thanks!

[@tiktokvibes9767]

Woaaah. Bon timing ce cours. Merci Guillaume. As-tu une chaine française également? First time I discover you through this chanel and I appreciate your work. Thank you freecodeCamp, thanks Guillaume. :)

[@jayantrajverma]

Please Bring a full course of blender in individual section of sculpting ,modling_textcturing....., Video editing, 2D... We are waiting for that a lot....

[@MADSTEVE_]

Merci Guillaume !

[@codewithguillaume]

De rien !

[@lokeshwaran7671]

Thank you

[@edirodriguezsantillana]

Thanks for the great video

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@rastapoile]

Merci pour ta vidéo et vive la France

[@harmez7]

Awesome coostoomyzation !

[@MightyKingKala]

thank you

[@gorkemgok9313]

I love your accent as much as I like your way of teaching

[@jamilsonprazerespestanajun8722]

Thanks a lot!

[@guillermomf]

It's a good Tailwind tutorial, congratulations Guillaume 👏🏼👏🏼👏🏼 I have only a question. What is the icon website you use in 3:53:16??

[@manasmj]

found the site? I still didnt get it, is it google icons?

[@guillermomf]

Hello @@manasmj I don't know what is that site but it isn't google icons. 🤷🏼‍♂

[@jordanaaccrombessy7]

Tailwind is awesome 🔥

[@sohrb]

the timing of this course ;)

[@thutanyan1381]

Hi, At first thank you for this course, actually I want to make you do mini projects with tailwind CSS If you have any mini projects, please let me know.

[@bilegtsdf5776]

thanks guys, tailwind finally complete

[@codewithguillaume]

What did you build with Tailwindcss ?

[@bilegtsdf5776]

@@codewithguillaume my life thanks bro, excellent tutorial ❤

[@piyushacharya7696]

@@codewithguillaume Bro, can i know the icon theme you are using in this video? loved this one

[@fayaz2956]

awesome. just one question: what is the icons youre using in vscode? thanks

[@fazlerabbi9200]

There are duplicate "Core Concepts" chapters at 08:07 and 03:56:31 The tutorial is very beginner friendly, I appreciate that. But for a 4 hours long tutorial, the expectation was higher.

[@codewithguillaume]

Thanks my friend! I did my best to be as beginner friendly as I could - would do more of Tailwindcss through project based on my channel!

[@fazlerabbi9200]

@Code with Guillaume great, gotta keep an eye then 🧐

[@dot_i5235]

Wow💙🧠

[@hasithatec8975]

thanks

[@solomonobihan9465]

I need to learn tailwind to help me build basic interfaces for my backend projects.

[@timmaaee]

lets go bois

[@umangpatanwala8968]

How do I open the tailwind file that we created at first on a browser???

[@davideugene7911]

Salut et merci beaucoup... Et aussi, j'aime bien l'accent 😊

[@codewithguillaume]

De rien ;)

[@danielphil4976]

if you are like me on using rails to learn this and got to the customisation part but can't seem to change the colour behind the tag with the texts instead of html { } in application.tailwind.css do body { @apply bg-slate-600 text-white text-lg font-bold !important; } this will override the whole background, took me a while to figure out

[@vishnusasi6526]

On time i was just thinking about learning tailwind

[@santokhan_]

I love Tailwind.

[@lukas.webdev]

me too

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@shakhawathhossainshatu1487]

You are awesome