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

# Forms plug-in

Tailwind provides a series of useful defaults for forms using the `@tailwindcss/forms` [plug-in](https://github.com/tailwindlabs/tailwindcss-forms). Similarly to the typography plug-in described earlier, install the plug-in:
```
$ yarn add @tailwindcss/forms
```

# Configuration

Next, we add `require('@tailwindcss/forms')` to the Tailwind configuration file:
```
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
```

This will give reasonable styles to the basic form elements. The plug-in uses the type attribute to affect sizing for input forms. Therefore, we need to have `type=text` for basic inputs for the styling to work. 

> **Note**: The Tailwind forms are not designed to be a finished work by themselves, but rather a better reset to start from when adding styling to our custom page.

Learn the configuration of Tailwind forms by using the Tailwind CSS forms plugin.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Tailwind Forms

Forms plug-in