View our courses: https://scrimba.com/links/allcourses

Learn Tailwind CSS with Victor Gonzalez

Full interactive course on Scrimba: https://rebrand.ly/gtailwind

During this course, we will be exploring the features of Tailwind CSS. As a quick recap, Tailwind is a utilityfirst 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 bestpractices. It's also worth noting, that Tailwind is mobilefirst and has an easy naming convention with responsive designs builtin.

Need some customizations? Tailwind's robust customization system will allow you to customize/tweak/modify everything in the framework through the use of the tailwind.config.js file. The customizations of Tailwind are beyond the scope of this course but rest assured that the default Tailwind classes are almost always exactly what you will need.

Do you wish to learn more from Victor?
Be sure to check out his courses:
https://coderstape.com/

⚡ 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!

Link to cheatsheet can be found here: https://coderstape.com/series/13lear...


We are looking for teachers! https://rebrand.ly/becomescrimbatea...

We also blog! Follow our articles: https://dev.to/scrimba

Join the Scrimba community chat: https://rebrand.ly/scrimba_discord