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

## Configuration

Tailwind generates a lot of CSS classes, and we may want to limit that list for performance reasons to make the CSS bundle smaller—or to make it easier to understand the set of possibilities.

We can specify which set of core plug-ins Tailwind should generate in either of two ways. Most likely, we will only want to eliminate a few core plug-ins. We can then create a block list by passing an object to the `corePlugins` key of the configuration. The keys of this object are the name of core plug-ins we want to eliminate, and the values are all `false`:
```
module.exports = {
  corePlugins: {
    flex: false,
    flexDirection: false,
    flexGrow: false,
    flexShrink: false,
    flexWrap: false,
  } 
}
```
This configuration eliminates all the flexbox-related tools, though it is not recommended. 

If we want an inclusion list instead, pass an array of the list of core plugins we want. This configuration includes only the flex utilities in Tailwind:
```
module.exports = {
  corePlugins: [
    flex,
    flexDirection,
    flexGrow,
    flexShrink,
    flexWrap,
  ] 
}
```

>**Note**: We do not recommend doing exactly that, either—the other utilities are also useful.

## Configure variant prefixes

We have seen variant prefixes in Tailwind, such as `hover` and `focus`, and Tailwind defines about a dozen or so potential prefixes, but most of them are not enabled by default. The `screen-size` prefixes work with all the core plugins. The `hover`, `focus`, and `dark` prefixes are enabled on a subset of core plugins that we would most likely use. We'll never notice that they are not enabled everywhere in most cases. The full list of variants by plug-in is available in the Tailwind documentation.



# Configuration

Tailwind generates a lot of CSS classes, and we may want to limit that list for performance reasons to make the CSS bundle smaller—or to make it easier to understand the set of possibilities.

We can specify which set of core plug-ins Tailwind should generate in either of two ways. Most likely, we will only want to eliminate a few core plug-ins. We can then create a block list by passing an object to the `corePlugins` key of the configuration. The keys of this object are the name of core plug-ins we want to eliminate, and the values are all `false`:
```
module.exports = {
  corePlugins: {
    flex: false,
    flexDirection: false,
    flexGrow: false,
    flexShrink: false,
    flexWrap: false,
  } 
}
```
This configuration eliminates all the flexbox-related tools, though it is not recommended. 

If we want an inclusion list instead, pass an array of the list of core plugins we want. This configuration includes only the flex utilities in Tailwind:
```
module.exports = {
  corePlugins: [
    flex,
    flexDirection,
    flexGrow,
    flexShrink,
    flexWrap,
  ] 
}
```

>**Note**: We do not recommend doing exactly that, either—the other utilities are also useful.

# Configure variant prefixes

We have seen variant prefixes in Tailwind, such as `hover` and `focus`, and Tailwind defines about a dozen or so potential prefixes, but most of them are not enabled by default. The `screen-size` prefixes work with all the core plugins. The `hover`, `focus`, and `dark` prefixes are enabled on a subset of core plugins that we would most likely use. We'll never notice that they are not enabled everywhere in most cases. The full list of variants by plug-in is available in the Tailwind documentation.



Learn how to limit Tailwind generated classes for performance reasons.

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

Change Generated Classes

Configuration