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

If we want some legible defaults for basic typography of long text on our page, Tailwind provides an [official typography plugin](https://tailwindcss.com/docs/typography-plugin).

# Install the plug-in

To install the plug-in, first, we add the package:

```
$ yarn add @tailwindcss/typography
```
# Configuration

Then, add it to the Tailwind configuration file, which now should have the following `plugins` section:

```
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
```

We use the typography plug-in by adding the CSS class `.prose` to any element, as shown below:

```
<article class="prose">
  All our text
</article>
```


To change the size, we use size modifiers, which we must use in conjunction with a class that already uses `.prose`, as shown below:

```
<article class="prose prose-sm">
  All our text
</article>
```

The base size is `1rem` or 16 points. These are the size modifiers:

* `-sm 14pt`
* `-lg 18pt` 
* `-xl 20pt` 
* `-2xl 40pt`

Any Tailwind utilities we use will override the typography defaults.

If we want some legible defaults for basic typography of long text on our page, Tailwind provides an [official typography plugin](https://tailwindcss.com/docs/typography-plugin).

# Install the plug-in

To install the plug-in, first, we add the package:

```
$ yarn add @tailwindcss/typography
```
# Configuration

Then, add it to the Tailwind configuration file, which now should have the following `plugins` section:

```
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
```

We use the typography plug-in by adding the CSS class `.prose` to any element, as shown below:

```
<article>
  All our text
</article>
```


To change the size, we use size modifiers, which we must use in conjunction with a class that already uses `.prose`, as shown below:

```
<article>
  All our text
</article>
```

The base size is `1rem` or 16 points. These are the size modifiers:

* `-sm 14pt`
* `-lg 18pt` 
* `-xl 20pt` 
* `-2xl 40pt`

Any Tailwind utilities we use will override the typography defaults.

Learn how to install Tailwind's typography plugin.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Typography Plug-in