About This Course

In this course, we’ll look at how to design webpages using Tailwind CSS. We’ll start with the typography of individual elements, and we’ll get to the box—the rectangle of space each element takes up—and how to manipulate it. Once we have our elements in boxes, we’ll look at the page layout with flexbox or grids.

After that, we’ll look at turning individual pages into full sites. We’ll also look at common site-wide page layouts, manage a design on different screen sizes, and handle a site-wide amount of styles and CSS.

Tailwind 2.0

This course uses Tailwind 2.0. Tailwind has been evolving pretty quickly, so there is a significant chance that more features have been introduced since we wrote this. The Tailwind documentation includes pages for release notes and upgrades guides.

Note: The release notes’ URLs change with each release, but they are linked from the main Tailwind documentation. Check those out for the latest changes.

Who is this course for

To keep this course short and to the point, we have made a few assumptions:

• We assume you already know the basics of CSS syntax and concepts. This course focuses on Tailwind, not raw CSS. If you want to get better grounded in CSS and its quirks, you might want to try the Web Consortium’s official page on CSS.

• We assume you can access the Tailwind reference documentation. The Tailwind documentation is very complete and easy to navigate. This course is not going to be a complete reference on all of Tailwind’s features. Instead, it’ll focus on the most common ones and how to use them successfully.

• In this course, we’ll focus on Tailwind CSS. We’ll use the Ruby on Rails application and install Tailwind.