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

# Color

Tailwind offers 90+ color utilities out of the box. Two of them are special., `.text-transparent` and `.text-current`. The `text-transparent` class makes the text transparent, meaning we can see the background color through it. We can sometimes use this class for effect, especially with `bg-clip-text`, which makes the background match the shape of the text. We can use `.text-current` as a reset if a different setting changes the color. It sets to the color of the parent element. Next, we have `.text-black`, which sets the color to `#000000`, and `.text-white`, which sets the color to `#ffffff`.

We then get combined classes: `.text-{color}-{level}`. Tailwind sets eight different colors by default at 10 different levels, from the lightest at 50 and then every
multiple of 100 from 100 to the darkest at 900. Below are the eight default
colors:

* Blue 
* Gray 
* Green 
* Indigo 
* Pink 
* Purple 
* Red 
* Yellow

In the following playground, we’ll try different text colors:


Understand how to modify text color and opacity in Tailwind. 

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Color and Opacity

Color