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

## Manage rows and columns
Sometimes, we want a cell to cover more than one row or column, like CSS tables. Tailwind offers two ways to manage this: 
* `span`
* `start` and `end`


## Span
We use `span` to specify the number of columns or rows we want the cell to take up with `.col-span-{count}` or `.row-span-{count}`, where the suffix is the number of columns or rows. The default value is `.col-span-1` or `.row-span-1`. The reset helpers are `.col-span-auto` and `.row-span-auto`.

The flow behavior continues. If we add a span to the first element, our four-cell example is this:

# Manage rows and columns
Sometimes, we want a cell to cover more than one row or column, like CSS tables. Tailwind offers two ways to manage this: 
* `span`
* `start` and `end`


# Span
We use `span` to specify the number of columns or rows we want the cell to take up with `.col-span-{count}` or `.row-span-{count}`, where the suffix is the number of columns or rows. The default value is `.col-span-1` or `.row-span-1`. The reset helpers are `.col-span-auto` and `.row-span-auto`.

The flow behavior continues. If we add a span to the first element, our four-cell example is this:

Manage rows and columns by using the span class.


Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Span

Manage rows and columns

Span