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

## Tailwind's stylesheet

Tailwind utilities often come in families with a common pattern of beginnings or endings. When we talk about those, we’ll use: .text-{size} to indicate a family of utilities that include `@tailwind base`, `@tailwind components`, and `@tailwind utilities`. Each of these files contains a different set of CSS rules. 

>**Note**: In the Webpack-based installation, we import with `@import` as the command name rather than `@tailwind`.

The `@tailwind` base file contains Tailwind’s **reset stylesheet** called Preflight. A reset stylesheet is a restyling of all the base HTML elements to a minimal set of styling properties. Without a reset stylesheet, each browser defines its own default set of style properties to render individual HTML elements that do not have further CSS properties. A reset stylesheet gives our application control over this baseline, eliminates differences between browsers, and provides a more minimal backdrop into which we insert our custom styling.

## Full set of reset styles

Tailwind’s reset stylesheet, Preflight, performs the following tasks:


* It overrides all styling from headers—so an `h1` header, for example, is visually identical to the base text.

* It removes styling from `ul` and `ol` lists, resulting in no bullets by default.

* It sets all margins to zero for elements that would normally have margins.
* By default, it sets all borders to a `0-pixel` width, solid, and the defined border color.
* It sets images and image-like objects to `display: block` rather than `display: inline`, meaning they will set themselves up as separate paragraphs (as if they were `div` tags), rather than `inline` (as if they were `span` tags).

We’ll get a pretty boring page if we only use the Preflight styles. Preflight ensures that we affirmatively and explicitly add any change to the display properties.


The `@tailwind components` file is quite small, and it only consists of the definitions of the `container` CSS classes, which are usually used at the top level of a page to define the box that the whole page is drawn in.

The bulk of what’s considered to be Tailwind is in the `@tailwind utility` file, which defines all the utilities and their prefixed variants. While working with Tailwind, we mostly use the contents of this file.


# Tailwind's stylesheet

Tailwind utilities often come in families with a common pattern of beginnings or endings. When we talk about those, we’ll use: .text-{size} to indicate a family of utilities that include `@tailwind base`, `@tailwind components`, and `@tailwind utilities`. Each of these files contains a different set of CSS rules. 

>**Note**: In the Webpack-based installation, we import with `@import` as the command name rather than `@tailwind`.

The `@tailwind` base file contains Tailwind’s **reset stylesheet** called Preflight. A reset stylesheet is a restyling of all the base HTML elements to a minimal set of styling properties. Without a reset stylesheet, each browser defines its own default set of style properties to render individual HTML elements that do not have further CSS properties. A reset stylesheet gives our application control over this baseline, eliminates differences between browsers, and provides a more minimal backdrop into which we insert our custom styling.

# Full set of reset styles

Tailwind’s reset stylesheet, Preflight, performs the following tasks:


* It overrides all styling from headers—so an `h1` header, for example, is visually identical to the base text.

* It removes styling from `ul` and `ol` lists, resulting in no bullets by default.

* It sets all margins to zero for elements that would normally have margins.
* By default, it sets all borders to a `0-pixel` width, solid, and the defined border color.
* It sets images and image-like objects to `display: block` rather than `display: inline`, meaning they will set themselves up as separate paragraphs (as if they were `div` tags), rather than `inline` (as if they were `span` tags).

We’ll get a pretty boring page if we only use the Preflight styles. Preflight ensures that we affirmatively and explicitly add any change to the display properties.


The `@tailwind components` file is quite small, and it only consists of the definitions of the `container` CSS classes, which are usually used at the top level of a page to define the box that the whole page is drawn in.

The bulk of what’s considered to be Tailwind is in the `@tailwind utility` file, which defines all the utilities and their prefixed variants. While working with Tailwind, we mostly use the contents of this file.


Learn how to include Tailwind's stylesheet in a project.

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

Preflight

Tailwind’s stylesheet