Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Learn Tailwind CSS

Enroll for freeGet started!

Join 12035 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Victor Gonzalez

with Victor Gonzalez

Course level: Intermediate

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.

You'll build

screenshot
Employee card

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

screenshot
Course landing page

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

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. Here’s our suggested resource to get you up to speed.

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.

Follow me on twitter

Why this course rocks

During this course, we will explore the features of Tailwind CSS.

Tailwind is a utility-first framework which aims to speed up the design process by 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, it leads to huge CSS files, reduces the ease of maintaining those files, and yields a poorer developer experience.

Tailwind avoids this frustration!

Another advantage of a utility framework is its superior performance with caching. This is due to not busting the cache for every small CSS change.

Tailwind also gives you sensible defaults to make sure your sites look and feel polished. This is achieved through the careful use of color palettes, color shades, sizing consistency, and modern web best practices.

Tailwind is mobile-first and has an easy naming convention with responsive designs built in!

Need some customizations? No problem! Tailwind's robust customization system allows you to tweak everything in the framework via the tailwind.config.js file.

These customizations are beyond the scope of this course but rest assured that the default Tailwind classes are almost always sufficient.

Join the Scrimba community chat Learning alone can be lonely. Click here to join our Discord server and connect with other Scrimba learners!