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

## Flex for adjusting sizes

Another way to adjust between sizes is to have an element use default block spacing on smaller devices and then convert to flex spacing on larger devices. The block spacing on small devices ensures that the items stay in a column, even if some of them are narrow, while the flex spacing at a larger size spreads them out in a row.

The common pattern here is a navigation bar that’s spread over the top of the page at a larger size. But it’s a menu column at a smaller size, generally hidden until the menu button is clicked.

Below is an example:


```
<div class="w-full hidden lg:flex lg:flex-grow, lg:items-center lg:width-auto
     divide-black divide-y lg:divide-y-0" id="navbar-menu">
  <a class="block lg:mr-4 p-2 hover:bg-gray-200">Blog</a>
  ... 
</div>
```
The outer `div` here is hidden on small screens to start. This is usually paired with JavaScript to make it not hidden. On a small screen, when it’s unhidden, it will use the default display mode of `block`, meaning columns. At larger sizes, the `lg:flex` overrides the `hidden` utility, and the display is `flex` and `.flex-grow`, meaning the items will fit across the screen. We have also added a dividing line between items at small scale, `.divide-y`, but the line goes away at larger sizes. The `.lg:divide-y-0` utility makes the items more distinguishable in the small column.

The inner items have a little bit more right margin at large sizes, and they change their background to gray on when we hover over them. They need to be explicitly set to `block` because `a` tags are inline by default. If we made those `div` tabs,  we won’t need the `.block`.
## Navbar

To create a navbar, we need a little JavaScript. The following snippet, vanilla JavaScript without a framework, assumes we have three elements. One is the navbar itself, with a DOM ID of `navbar-menu`. The other two elements are hidden in the same spacing and are the hamburger menu, `navbar-burger`, and an x-shaped close element, `navbar-close`:


# Flex for adjusting sizes

Another way to adjust between sizes is to have an element use default block spacing on smaller devices and then convert to flex spacing on larger devices. The block spacing on small devices ensures that the items stay in a column, even if some of them are narrow, while the flex spacing at a larger size spreads them out in a row.

The common pattern here is a navigation bar that’s spread over the top of the page at a larger size. But it’s a menu column at a smaller size, generally hidden until the menu button is clicked.

Below is an example:


```
<div class="w-full hidden lg:flex lg:flex-grow, lg:items-center lg:width-auto
     divide-black divide-y lg:divide-y-0" id="navbar-menu">
  <a class="block lg:mr-4 p-2 hover:bg-gray-200">Blog</a>
  ... 
</div>
```
The outer `div` here is hidden on small screens to start. This is usually paired with JavaScript to make it not hidden. On a small screen, when it’s unhidden, it will use the default display mode of `block`, meaning columns. At larger sizes, the `lg:flex` overrides the `hidden` utility, and the display is `flex` and `.flex-grow`, meaning the items will fit across the screen. We have also added a dividing line between items at small scale, `.divide-y`, but the line goes away at larger sizes. The `.lg:divide-y-0` utility makes the items more distinguishable in the small column.

The inner items have a little bit more right margin at large sizes, and they change their background to gray on when we hover over them. They need to be explicitly set to `block` because `a` tags are inline by default. If we made those `div` tabs,  we won’t need the `.block`.
# Navbar

To create a navbar, we need a little JavaScript. The following snippet, vanilla JavaScript without a framework, assumes we have three elements. One is the navbar itself, with a DOM ID of `navbar-menu`. The other two elements are hidden in the same spacing and are the hamburger menu, `navbar-burger`, and an x-shaped close element, `navbar-close`:


# Flex for adjusting sizes

Another way to adjust between sizes is to have an element use default block spacing on smaller devices and then convert to flex spacing on larger devices. The block spacing on small devices ensures that the items stay in a column, even if some of them are narrow, while the flex spacing at a larger size spreads them out in a row.

The common pattern here is a navigation bar that’s spread over the top of the page at a larger size. But it’s a menu column at a smaller size, generally hidden until the menu button is clicked.

Below is an example:


```
<div hidden lg:flex lg:flex-grow, lg:items-center lg:width-auto
     divide-black divide-y lg:divide-y-0" id="navbar-menu">
  <a>Blog</a>
  ... 
</div>
```
The outer `div` here is hidden on small screens to start. This is usually paired with JavaScript to make it not hidden. On a small screen, when it’s unhidden, it will use the default display mode of `block`, meaning columns. At larger sizes, the `lg:flex` overrides the `hidden` utility, and the display is `flex` and `.flex-grow`, meaning the items will fit across the screen. We have also added a dividing line between items at small scale, `.divide-y`, but the line goes away at larger sizes. The `.lg:divide-y-0` utility makes the items more distinguishable in the small column.

The inner items have a little bit more right margin at large sizes, and they change their background to gray on when we hover over them. They need to be explicitly set to `block` because `a` tags are inline by default. If we made those `div` tabs,  we won’t need the `.block`.
# Navbar

To create a navbar, we need a little JavaScript. The following snippet, vanilla JavaScript without a framework, assumes we have three elements. One is the navbar itself, with a DOM ID of `navbar-menu`. The other two elements are hidden in the same spacing and are the hamburger menu, `navbar-burger`, and an x-shaped close element, `navbar-close`:


Learn how to apply navbar, SVG, and flex on larger devices.

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

Flex on Larger Devices

Flex for adjusting sizes