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

# Positioning

We can specify how the background image is positioned in the box. This tells CSS which side of the image should touch which side of the box. Tailwind provides nine utilities. The first one, `.bg-center`, centers the image in the center of the box.

There are four direction utilities:


`.bg-center`


* `.bg-left` 
* `.bg-right` 
* `.bg-top` 
* `.bg-bottom`

There are four corner utilities:

* `.bg-left-top` 
* `.bg-left-bottom` 
* `.bg-right-bottom` 
* `.bg-right-top`


# Tiling

If the image is smaller than the box, we can tile it. The `.bg-repeat` utility tiles the image horizontally and vertically. To go in only one direction, we use `.bg-repeat-x` or `.bg-repeat-y`. The `.bg-no-repeat` utility resets everything.

Two special options, `.bg-repeat-round` and `.bg-repeat-space`, change how the tiling places the images. The default `repeat` will put a partial image at the end of the box. If we choose `.bg-repeat-space`, there will be no partial image, and any whitespace will be distributed evenly between the tiled images. If we choose `.bg-repeat-round`, there will be no whitespace because each image will be stretched to cover the whitespace.


Explore Tailwind properties for positioning and tiling a background image.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Background Images

Positioning