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 prefixes

Here is a quick tour of Tailwind prefixes We have left out a couple that do not have full browser support:

* `active`: Applies when the element is active.
* `checked`: Applies if the checkbox or radio button has been checked.
* `dark`: Applies if Tailwind thinks it’s in dark mode.
* `disabled`: Applies when the element is disabled.
* `focus`: Applies when the element has focus, as in a text field.
* `focus-within`: Applies to a parent class when any child inside that parent has focus. It’s enabled by default wherever `hover` is enabled.
* `hover`: Applies when the user is hovering the pointer over the element.
* `motion-reduce`: Applies if the user has enabled reduced motion on the system. It’s often applied with `hover`, and we would often have a `motion-reduce` and a `motion-safe` variant.
* `motion-safe`: Applies if the user has not enabled reduced motion on the system. It’s often applied with `hover`, and we would often have a `motion-reduce` and a `motion-safe` variant.
* `visited`: Applies if a link has been visited.

# Group properties

Two group properties work by declaring a parent element with the `.group` class. These variant properties apply when any element in the parent is targeted, not only the element in question:

* `group-focus`: Applies to any child when any child under the parent gets the `focus`.
* `group-hover`: Applies to any child when the parent has hovered over. It’s enabled by default wherever `hover` is enabled.


A few properties are applied based on the order of the elements within their parent. These variants would go on the child element, not the parent element, and are particularly helpful if our template language is generating an entire loop:

* `even`: Applies if the element is an even-number child (second, fourth, sixth, and so on).
* `first-child`: Applies if the element is the first (top-most) child of its parent element.
* `last-child`: Applies if the element is the last (bottom-most) child of its parent element.
* `odd`: Applies if the element is an odd-numbered child (first, third, fifth, and so on).

Learn how to customize Tailwind by using prefixes and group properties.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

A Tour of the Prefixes

Tailwind prefixes