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

With Tailwind, we can lay out the elements on an entire page and manage common features like navigation, sidebars, and footers. We can also use Tailwind to put  complex groupings of elements within a page, such as cards or hero blocks.

> Let’s start with some general utilities Tailwind provides to help place elements on a page—**the box-to-box relationships**.

# Containers


Many CSS frameworks use a `container` class as the general top-level container to specify the page width. While Tailwind does offer a `.containe`r utility, Tailwind’s version does much less than similar classes do in other frameworks. The **`.container`** utility specifies the` max-width` of the element based on the width of the browser viewport. For example, any viewport between 640 and 768 pixels wide would be set to a `max-width` of 640 pixels. Once the viewport goes over 768, the `max-width` stays at 768 pixels until the viewport hits 1024 pixels. It increases again when the viewport reaches 1280 pixels.

The advantage of using a `container` is that it allows us to only worry about those specific widths in our design rather than having to take into account any possible width the viewport might have.

If you are familiar with other frameworks, Tailwind’s `.container` would not have the features you may expect. A `.container` utility in Tailwind does not automatically horizontally center its child elements. To center them, we pair the `container` utility with `mx-auto`. A Tailwind `.container` utility also does not introduce padding or margin to pull its elements away from the browser’s border. We pair the container with a `.m`- or `.p-` utility to get this behavior. Therefore, a plausible class list for our top-level element might be `class="container mx-auto py-12 px-6"`.


Learn how Tailwind can manage the layout of multiple elements through containers, floats, and clears.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Layout Features

Containers