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

Each HTML element in the DOM takes up a rectangle of space on the screen. Every browser’s developer tools include a representation of that rectangle. Below is what it looks like:

The size of the box is determined by the content of the element if we do not make any customizations. Tailwind gives us control over every aspect of the box.

# Making the box visible

Perhaps the most important feature of any DOM element is whether the user can see it. By manipulating this feature with a little JavaScript, we can add interaction cheaply. A common pattern is to load a lot of potential DOM elements at the initial page load but have many of them start off as hidden, manipulating visibility to change the page without needing to call the server for more data.

When we want to have a DOM element the user can not see, use the `.hidden` utility, which wraps the CSS property, `displays: none`. In Tailwind, the opposite of `.hidden` is usually `.block`. While many other potential values for `display` are available, Tailwind’s Preflight makes many elements use the `block` value. The other common value is `inline`, but in Tailwind, we are more likely to construct inline behavior using a flexbox or grid layout that we'll cover in the [next chapter](https://www.educative.io/courses/modern-css-tailwind/layout-features).

Additionally, tailwind has `.visible` and `.invisible` utilities. The difference between `.invisible` and `.hidden` is that a `.hidden` element does not display and is not part of the DOM layout. Therefore, its existence does not affect the layout of other elements. In contrast, an `.invisible` element does not display its contents but does affect the layout of the rest of the page. It will show up as a gap in the page, still sized but empty.

# What’s in the box?

The CSS box model has four parts. From inside out, they are the following:

* **Content** is the text or media inside the element. 
* **Padding** is the space around the content but inside the border. We can specify the padding separately in each of the four directions, only horizontally, only vertically, or in all directions at once. 
* **The border** is the edge around our padding. The only thing that distinguishes a border from padding is using color and a pattern to draw a border around the padding and content.

* **The margin** is outside the border between an element and all other elements. We can specify the margin in all directions the same way we specify padding.

We can also specify the height and width of the box, either in absolute numbers or as a percentage of the available width and height. If we explicitly specify width or height, any unused space is considered part of the content. If we limit the size of the element, we can also tell the page what to do with any content that overflows that amount of size. Finally, we can perform a few adjustments to the background of an element.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Box