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

## Property

The next most important property of the flexbox is whether it will wrap, which is a property of the parent of the box. The default is not to wrap, `.flex-no-wrap`, but if we specify `.flex-wrap`, then our row container will automatically move items to the next row if the item would overflow the main axis of the container. Normally, that would be going over the width of a row flexbox, but we could also explicitly set the height of a column box and have it wrap.  If we want to wrap right to left, Tailwind provides `.flex-wrap-reverse`.

We can explicitly specify the order of the elements in the flexbox with the `.order-{integer}` utility, where the suffix is any integer from `1` to `12`, or we can use `.order-first`, `.order-last`, or `.order-none`. Suppose the order is specified for one or more elements in the flexbox. In that case, that `order` property determines where in the box that element goes, overriding `order` in which the element appears in the source HTML.

One great use of this property is to allow the main content to come before the other elements in the source `order`, but still display correctly. This code provides the same layout as the snippet shown earlier:

We’ll try the following properties classes in the playground below:


* `order-1`
* `order-2`
* `order-4`
* `order-5`

# Property

The next most important property of the flexbox is whether it will wrap, which is a property of the parent of the box. The default is not to wrap, `.flex-no-wrap`, but if we specify `.flex-wrap`, then our row container will automatically move items to the next row if the item would overflow the main axis of the container. Normally, that would be going over the width of a row flexbox, but we could also explicitly set the height of a column box and have it wrap.  If we want to wrap right to left, Tailwind provides `.flex-wrap-reverse`.

We can explicitly specify the order of the elements in the flexbox with the `.order-{integer}` utility, where the suffix is any integer from `1` to `12`, or we can use `.order-first`, `.order-last`, or `.order-none`. Suppose the order is specified for one or more elements in the flexbox. In that case, that `order` property determines where in the box that element goes, overriding `order` in which the element appears in the source HTML.

One great use of this property is to allow the main content to come before the other elements in the source `order`, but still display correctly. This code provides the same layout as the snippet shown earlier:

We’ll try the following properties classes in the playground below:


* `order-1`
* `order-2`
* `order-4`
* `order-5`

Understand various utilities for controlling, ordering, and wrapping items in the flexbox.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Order and Wrap

Property