Gain insights into industry best practices for designing web pages with Tailwind CSS. Explore typography, box models, and master layouts using flexbox and grids effectively.

docker.tar.gz

QS_Tailwind

Apply_tailwind

This course examines and explains industry best practices to design web pages using Tailwind CSS. We’ll start with the typography of individual elements, and then we’ll get to “the box”—the rectangle of space each element takes up on a web page and how to manipulate it. Once we have our elements in boxes, we’ll take a look at the page layout using flexbox and grids.

Modern CSS with Tailwind

# Tailwind’s utility classes

Tailwind’s utility classes are the most important part of Tailwind to understand. 

Tailwind is made up of hundreds and hundreds of utility classes, most of which set the value of a single CSS property. For example, the `.font-bold` utility class is an alias for the CSS property, `font-weight: 700`. For `class=font-bold`, we use that utility in an HTML element as part of the `class` attribute.

The Tailwind system generates a set of utility CSS classes based on the Tailwind configuration file. We have a great deal of freedom over which classes are included and even the names Tailwind uses. Unless we clearly say otherwise, in this course, we’ll be talking about the default set of classes generated by a minimal configuration.


Understand the flow and working of Tailwind's utility classes.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Utilities

Tailwind’s utility classes