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

## Spacing used

We can use `theme#spacing` or `theme#extend#spacing` to override properties, such as padding, margins, width, height, and more. We replace the spacing, as shown below:

```
module.exports = {
  theme: {
    spacing: {
      'small': 4px,
      'medium': 12px,
      'large': 36px
    } 
  }
}
```
These new suffixes will apply anywhere the spacing goes. Therefore, we now have `.p-small`, `.h-medium`, `.gap-large`, or other possibilities.

If we like the existing scale but want more options, we use the `extends` option:
```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '15': '60rem',
        '17': '76rem'
      }
    } 
  }
}
```

## Other core plugins

Nearly every Tailwind utility has a series of suffixes off a base pattern. Most of them allow us to override or extend them the same way we do for spacing and colors.

Every core plug-in’s page in the Tailwind documentation explains how to modify that plug-in. Let’s look at an example:


```
module.exports = {
  theme: {
    extend: {
      zIndex: {
        "-1": "-1",
        "-5": "-5",
        "-1000": "-1000"
      } 
    }
  }
}
```

In this case, Tailwind generates the negative classes consistent with negative margins, so the negative classes here are `.-z-1`, `.-z-5`, and `.-z-1000`. If we want the complete set of `z-index` options, we don’t use `extends`:

```
module.exports = {
  theme: {
    zIndex: {
      "1": "1",
      "5": "5",
      "1000": "1000"
      "-1": "-1",
      "-5": "-5",
      "-1000": "-1000"
    } 
  }
}
```
We have `.z-1`, `.z-5`, and `.z-100` alongside `.-z-1`, `.-z-5`, and `.-z-1000`, but the original classes are no longer generated. Every core plugin with multiple options allows for similar replacement or extension of the options. Again, the Tailwind documentation has the full listing.

In the following playground, we’ll customize the spacing by updating the Tailwind configuration file:

# Spacing used

We can use `theme#spacing` or `theme#extend#spacing` to override properties, such as padding, margins, width, height, and more. We replace the spacing, as shown below:

```
module.exports = {
  theme: {
    spacing: {
      'small': 4px,
      'medium': 12px,
      'large': 36px
    } 
  }
}
```
These new suffixes will apply anywhere the spacing goes. Therefore, we now have `.p-small`, `.h-medium`, `.gap-large`, or other possibilities.

If we like the existing scale but want more options, we use the `extends` option:
```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '15': '60rem',
        '17': '76rem'
      }
    } 
  }
}
```

# Other core plugins

Nearly every Tailwind utility has a series of suffixes off a base pattern. Most of them allow us to override or extend them the same way we do for spacing and colors.

Every core plug-in’s page in the Tailwind documentation explains how to modify that plug-in. Let’s look at an example:


```
module.exports = {
  theme: {
    extend: {
      zIndex: {
        "-1": "-1",
        "-5": "-5",
        "-1000": "-1000"
      } 
    }
  }
}
```

In this case, Tailwind generates the negative classes consistent with negative margins, so the negative classes here are `.-z-1`, `.-z-5`, and `.-z-1000`. If we want the complete set of `z-index` options, we don’t use `extends`:

```
module.exports = {
  theme: {
    zIndex: {
      "1": "1",
      "5": "5",
      "1000": "1000"
      "-1": "-1",
      "-5": "-5",
      "-1000": "-1000"
    } 
  }
}
```
We have `.z-1`, `.z-5`, and `.z-100` alongside `.-z-1`, `.-z-5`, and `.-z-1000`, but the original classes are no longer generated. Every core plugin with multiple options allows for similar replacement or extension of the options. Again, the Tailwind documentation has the full listing.

In the following playground, we’ll customize the spacing by updating the Tailwind configuration file:

Learn how to customize the default spacing.

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

Spacing

Spacing used