Tailwind CSS Tutorial for Beginners - Full Course

Learn Tailwind CSS with Victor Gonzalez

During this course, we will be exploring the features of Tailwind CSS. As a quick recap, Tailwind is a utility-first framework designed to speed up the design process by completely removing the need for custom CSS. In the past, every HTML element would get a single class and that class would contain a lot of custom CSS in a separate CSS file. Though this is still the general practice, this practice leads to huge CSS files, reduces the ease of maintaining CSS, and yields overall poorer developer experience.

Another advantage of a utility framework is its superior performance with caching due to not busting the cache for small CSS changes. Tailwind has been designed with incredibly sensible defaults to make your designs look and feel "polished" and "designed" through the careful use of color palettes, color shades, sizing consistency, and modern web best-practices. It's also worth noting, that Tailwind is mobile-first and has an easy naming convention with responsive designs built-in.

📝 Do you wish to learn more from Victor?
Be sure to check out his courses:

⚡ Contents ⚡
00:00:00 - Welcome to the Tailwind CSS course
00:04:16 - Background Classes & Shades
00:08:40 - Element Sizing & Tailwind's Numbering System
00:14:51 - Shades of Blue Challenge
00:17:07 - Padding & Margins
00:22:45 - Styling Text Part 1
00:28:45 - Styling Text Part 2
00:35:15 - Text Styling
00:41:28 - Borders
00:49:03 - The Buttons Challenge
00:55:43 - Display Modes
00:57:43 - Flexbox
01:09:36 - Block Gallery Challenge
01:15:41 - Responsive Design
01:23:18 - Hover Modifier
01:25:35 - Focus Modifier
01:27:21 - Combination Modifier
01:29:14 - Other Utilities
01:35:11 - Input Component Challenge
01:39:01 - Employee Card Challenge
01:50:19 - Final Course Project - Landing Page
02:30:36 - It's A Wrap!

--

[smithemu]

I am around 27 minutes and had to come comment about how EASY you make it look. Excellent teaching! Kudos!

[GMGNATION]

I have been searching the internet for a course that will explain tailwind for me as a newbie this course is the best course ever . I hardly comment on videos but this one my friend I must tell you earned it. Thank you

[TradeWithJon]

The best TailWind tutorial out there ~ Thank you!

[subramanyam.dm]

I visited number of tutorials in youtube, but this is best to learn.

[theophilusadjeiowusu]

i'm done with the course and i must say is great tutorial sir. God bless you

[UltRoronoa]

THIS IS THE MOST INSTRUCTIVE TAILWIND CSS TUTORIAL I'VE EVER WATCH. THANK YOU !

[alex__coder]

I've got a great understanding of the Tailwind CSS, The landing page project was really good, I was able to complete in 3 days. Learned a lot. I used the grid for the form, it really worked like charm in creating 2 columns.
Thanks, Scrimba !!

[manuel]

I think this tutorial offers the BEST tailwindCSS beginners' experience!🔥. I would gladly recommend this to anyone

[skverskk]

Great delivery with easy to follow examples. Only suggestion I have is to increase the font size on your coding screen and make the presentation screen full jeight. Thanks for making a great intro tutorial.

[Epikht]

i'm 34 minutes in that video and i can say that you are the best bro

[drewsankz]

The best Tailwind tutorial for beginners I have come across. Thank you for saving me from the 30-hour tutorials! 💯

[cerealrakist]

Me: You teach tailwind better than the tailwind creator/and channel

Plot twist: this dude is the tailwind creator after all.

Me : 👀😑🤷🏻‍♀️

[kozla]

After Bob Ziroll, React course on Scrimba, this tutorial for Tailwind is just on point * :)

[arpandutta]

The best tailwind and landing page tutorial.
Huge fan of your work

[dripshot]

Absolutely love this, breaks down the major part of css and u can buttress the rest reading the Doc. I love it

[kemaeljosuakauppaymuthoo]

thank you SO much for this course, tailwind is such a great tool but there are few comprehensive tutorials available. Yours is the best one I could find on the entire Youtube catalogue!

[iambryanph]

Gzz, Thanks alot, you run it very smooth. This is very helpful.

[BrianSB]

I'm doing the Scrimba version. Just wanted to say this is an excellent, clear, and concise course. I thought Tailwind a bit overwhelming. The way you broke it down I immediately understood. Thank you...

[bbqengineer]

Simply amazing! This is the longest and most thorough course I've seen. Thank you so much!

[darky]

"Most bootstrap websites look like bootstrap websites 😅", and thanks for the tutorial :) Appreciate it.