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

# Alignment of text

Several Tailwind classes are used to specify the horizontal alignment of text. These are listed below:

* `.text-left` 
* `.text-center` 
* `.text-right` 
* `.text-justify`

They all change the CSS `text-align` property. The exact bounds of the alignment depend on the box in the [next chapter](https://www.educative.io/courses/modern-css-tailwind/box).

# Vertical alignment

The CSS property for vertical alignment is `vertical-align`, and these are the Tailwind classes:
* `.align-baseline` 
* `.align-top` 
* `.align-middle` 
* `.align-bottom` 
* `.align-text-top`
* `.align-text-bottom`


> As with the horizontal alignment, exact positioning depends on the text box.

# Line spacing and height

For line spacing, Tailwind has both a relative and an absolute option. The relative option starts with `.leading-none`, which makes the line height exactly the size of the font. **Leading** is the printing term for line height. (It rhymes with “wedding,” not “beading”). It is normally going to feel a little cramped, and Tailwind lets us separate the line height with the following classes in order from most closely packed to farthest apart:


* `.leading-tight`
* `.leading-snug`
* `.leading-normal` (1.5 times the font size, usually the default) 
* `.leading-relaxed`
* `.leading-loose`

In the playground below, we’ll see the text alignment is as follows:

* `text-center`
* `text-right`

Learn and practice text alignment and spacing in Tailwind.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Alignment and Spacing

Alignment of text

Vertical alignment