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

# Add some classes

We can center the text, add a little distance between two parts, vertically center the text against the logo, and put the logo on the right. The Tailwind classes that we use do a pretty good job of representing our intent.

We add some classes here. The outer ``div`` now has two Tailwind `classes: flex justify-center`. The image has another two classes, `mx-4 order-last`, and the text block also has `mx-4 self-center`. The `mx-4` classes specify horizontal margin, while the rest of the classes all deal with layout using the CSS flexbox structure.

Discover different types of classes about header and button components in Tailwind.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Add Tailwind Features

Add some classes