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

# Border features

Borders are similar to margins and padding but are more complicated because they can have their own color and style.

The size options for borders are more limited because we do not typically want borders as big as margins might get. More importantly, the size options for borders are measured in pixels, not `rem`. The most basic border option is `.border`, which gives us a 1-pixel border in all four directions.

After that, we have `.border-{side}-{size}`. Unlike padding and margins, a dash(`-`) is included before the side. The side options are: bottom (`-b`), top (`-t`), left (`-l`), and right (`-r`). Not including a side applies the size to all four sides. The size is also optional:` -0`, `-2`, `-4`, and `-8`, which is the width of the border in pixels. No specified size means a size of `1`.

If either the side or the size is not included, we do not need the prefixing dash. For example, valid `border-width` classes include:

* **`.border-2`**: Does not specify a side and gives us a 2-pixel border on all sides.
* **`.border-b`**: Does not specify a size and gives us a 1-pixel bottom border.
* **`border-r-4`**: Results in a 4-pixel right border.

Unlike margins or padding, Tailwind does not provide paired horizontal or vertical options for border width. We need to specify both sides separately—for example,`class="border-t border-b"`.

# Border lines

Border lines may have a style. To display a style, we use a separate Tailwind utility class. The default is a solid border, which is indicated with  `.border-solid`. Tailwind also provides utilities for `.border-dashed`, `.border-dotted`, `.border-double`, and `.border-none`.

Border lines may also have a color and an opacity. The border color and opacity options are exactly the same as the text color options, only prefixed with `.border`. We can specify a color with `.border-{color}`—for example, `.border-gray-500`. Similarly, we can also specify opacity with `.border-opacity-{level}`—for example, `.border-opacity-50`. The colors and opacity levels are the same as for text.

# Basic rounded options 
Tailwind provides the following nine basic rounded options, each of which specifies the radius size in `rem`:

Learn how to manage border sides, shapes, line types, and size.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Borders

Border features