Learn Tailwind CSS for free

Tailwind CSS is a utility-first framework for rapidly building custom designs. This tutorial will teach your Tailwind from scratch, using a mix of lectures and interactive coding challenges.

Course content

01Welcome to the Tailwind CSS course
4:12
02Background Classes & Shades
4:21
03Element Sizing & Tailwind's Numbering System
6:08
04Shades of Blue Challenge
2:13
05Padding & Margins
5:34
06Styling Text Part 1
5:57

A note from the instructor 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. We will start with the basics and build our knowledge one step at a time. Let's get started!
— Victor Gonzalez, course instructor
DOWNLOAD THE COURSE PDF
Follow this link to Download

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 incredible 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.

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.

Advantages of Tailwind CSS

  • No need for huge CSS files with custom CSS
  • Easy to make design changes right from the view files
  • Better developer experience
  • Mobile-first designs from the start
  • Designed with defaults for a polished and designed look and feel
  • Easily customizable with the config file

what you'll build 🔨

Course landing page

Build a beautiful landing page for this course. This capstone project brings all your Tailwind skills together.

Employee card

Tailwind makes it super-simple to create cards and other components. You'll build an employee card from scratch.

Meet your teacher 👋

The course creator

Victor Gonzalez

Victor is a Senior Web Developer with over 10 years of professional experience building web applications. He has taught software development to hundreds of thousands of people via his popular YouTube channel Coders Tape.

Thank Victor for the course

why you'll learn faster 🔥

secure your free spot

100,000 people can't be wrong