Learn Tailwind CSS From Scratch
Course Live Demo
Live Demo of Final Project
The interactive live demo of the final project will give you a glimpse to what you will be learning during this course.
Free Course Companion PDF
Download PDF Document
This PDF contains the information for each lesson in an easy to reference guide. Keep it handy as you memorize all of the Tailwind CSS classes.
Welcome to Tailwind CSS Crash Course
Welcome to the Scrimba Tailwind CSS Crash Course! Firstly, I want to thank you for joining in and learning Tailwind in Scrimba's awesome platform. The purpose of this document is to help you learn all of the utility classes and serve as a guide during the course and beyond. We will start with the basics and build our knowledge one step at a time. Let's get started!
Background Classes & Shades
This set of classes change the background color of an element using a scale of 100-900 for shades and a palette of over 90 shades.
Element Sizing & Tailwind's Numbering System
All of the numbers in Tailwind are based around the rem unit of measurement. 1 rem is equal to the size of the base font of the document. As an example, if the base font size is 16px then 1 rem is equal to 16px and we can deduce that 1.25 rem is equal to 20px. To help with these fractional numbers, Tailwind's numbered classes are multiplied by 4 to avoid having numbers with decimal places.
Challenge 1 - Shades of Blue
Now that we know about sizing and background colors, it's time for our first simple challenge.
Padding & Margins
These classes add padding and margin to an element using the Tailwind numbering system.
Styling Text Part 1
Font styling is a huge part of any design and Tailwind has plenty of classes that we can use to style the text on our apps. It even includes utility classes for transformations like uppercase.
Styling Text Part 2
In part 2, we continue to explore the available classes in Tailwind CSS.
Challenge 2 - Text Styling
With more tools under our belts, it's time to tackle another challenge. This time putting everything we have learned thus far to the test.
These classes will color, stylize and add radius to any border or corners.
Challenge 3 - The Buttons Challenge
It's time for the next challenge, this time we are styling 5 different button using everything that we have learned thus far.
Most items are display block by default but that can easily be changed with the available display classes.
Tailwind uses Flexbox for the layout of items on the document. Flexbox is a css display property that defines a flex container. Once a container has been assigned as a flex container, we can use all of the alignment utility classes to achieve the desired look.
Challenge 4 - Block Gallery
Time for another challenge and this time we flex our muscles with some flexbox in this brain-twisting block gallery challenge.
All modern applications should be able to responsively fit into the screen size. Tailwind is a mobile-first framework, meaning that all of the classes that we have talked about thus far, are for mobile and trickle up to desktop. But we can change this with a couple of modifiers.
We can tap into the built-in hover state in CSS using the hover: modifier along with any of the default classes to achieve interactive designs.
Adding a focus state is simple using the focus: modifier along with any of the default classes provided by Tailwind CSS.
Sometimes, the design may require 2 modifiers at the same time. For example, you may need to change the hover state for a background color but only in md: size. Let's explore how to achieve this.
There are some other useful utilities that you should know about.
Challenge 5 - Input Component
Input fields are easily customizable with some utility classes.
Challenge 6 - Employee Card
Here's a full example of an employee card nicely styled using all default Tailwind classes.