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

## Columns of a table

Using a table was the traditional way of spacing HTML pages. Unless we are displaying tabular data, a CSS grid is now preferable for layout purposes, so Tailwind does not provide many specific table utilities.

Tailwind lets us use `.table-auto` to keep the default browser behavior of auto spacing the columns of a table based on its content. If we want to specify column widths explicitly, we can use `.table-fixed` on the `<table>` element. We'll put an explicit width helper on each column of the table—the fractional helpers are useful for this.

Tailwind also lets us merge the borders of adjacent table cells with the help of the `.border-collapse` utility, which is reset with `.border-separate`.

We'll try the following border classes in the playground below:
* `table-fixed`
* `border`
* `border-collapse`

Below is the result we’ll get

# Columns of a table

Using a table was the traditional way of spacing HTML pages. Unless we are displaying tabular data, a CSS grid is now preferable for layout purposes, so Tailwind does not provide many specific table utilities.

Tailwind lets us use `.table-auto` to keep the default browser behavior of auto spacing the columns of a table based on its content. If we want to specify column widths explicitly, we can use `.table-fixed` on the `<table>` element. We'll put an explicit width helper on each column of the table—the fractional helpers are useful for this.

Tailwind also lets us merge the borders of adjacent table cells with the help of the `.border-collapse` utility, which is reset with `.border-separate`.

We'll try the following border classes in the playground below:
* `table-fixed`
* `border`
* `border-collapse`

Below is the result we’ll get

Learn how to manage spacing in HTML pages by using tables.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Build an Interactive E-Library Using Next.js and Tailwind

Conclusion

Appendix

Tables

Columns of a table