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

## Background color
Tailwind’s background color is similar to text color and border color—the pattern is `.bg-{color}` with the same color names the other groups use, such as `.bg-red-700` or `.bg-orange-300`. Tailwind also provides `.bg-opacity-{level}` that follows the same steps as text opacity.

## Shadows


A box-shadow is technically not a background color, but it’s used like one. Tailwind provides a few utilities to manage the box-shadow. The base utility, `.shadow`, effectively creates a 3-pixel wide, 10% opacity black border that’s vertically offset by 1-pixel vertically. We can then make that smaller with the `xs` and `sm` modifiers, or bigger with the`md`, `lg`, `xl`, and `2xl` modifiers. For example, we can write `.shadow- sm`, `.shadow-xl`, and so on.

We can have a small inset shadow with the `.shadow-inner` class, which makes the element look like it’s lower than the rest of the screen. There are no size variants.  We can cancel all of these with `.shadow-none`. As we can see in the following example, it’s a pretty subtle effect unless we make it large:


# Background color
Tailwind’s background color is similar to text color and border color—the pattern is `.bg-{color}` with the same color names the other groups use, such as `.bg-red-700` or `.bg-orange-300`. Tailwind also provides `.bg-opacity-{level}` that follows the same steps as text opacity.

# Shadows


A box-shadow is technically not a background color, but it’s used like one. Tailwind provides a few utilities to manage the box-shadow. The base utility, `.shadow`, effectively creates a 3-pixel wide, 10% opacity black border that’s vertically offset by 1-pixel vertically. We can then make that smaller with the `xs` and `sm` modifiers, or bigger with the`md`, `lg`, `xl`, and `2xl` modifiers. For example, we can write `.shadow- sm`, `.shadow-xl`, and so on.

We can have a small inset shadow with the `.shadow-inner` class, which makes the element look like it’s lower than the rest of the screen. There are no size variants.  We can cancel all of these with `.shadow-none`. As we can see in the following example, it’s a pretty subtle effect unless we make it large:


Learn how to use different background colors and shadows.

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

Background Style

Background color