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

## The `screens` object

The `screens` object inside the key generates the breakpoints used for the responsive prefixes. The default looks like the one below:
```
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
     } 
   }
}
```
We can modify this in many ways but note that we need to provide the entire range of sizes if we modify the values here. If we only want to add a new size, we need to access the extensive subject of themes:
```
module.exports = {
  theme: {
    screens: {
      extend: {
        3xl: '2440px',
      }
    } 
  }
}
```

These breakpoints are a reasonable set of defaults, but if we only want to move the values around and about, we can do that here.

## Min and max values

We can also change the names of the keys to names of our choice, such as phone, landscape, tablet, and desktop. Those keys then become the names of our prefixes, so we’ll no longer write`sm:m-0`; we'll write `phone:m-0`.

If the value we provide for the screen width keys is a string, it’s considered the `min-width` of the breakpoint when generating the CSS. We can also pass an object with `min` and `max` keys if we specify the breakpoints differently. If we only specify `max` values, the responsive behavior is reversed. 

Unprefixed utilities apply at the largest size, and prefixes take effect as the screen gets smaller:
```
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '9999px'},
      'xl': {'max': '1535px'},
      'lg': {'max': '1023px'},
      'md': {'max': '767px'},
      'sm': {'max': '639px'},
    } 
  }
}
```

We can also supply a min value to those objects, limiting each breakpoint to a specific range. This means that we must specify all properties at each breakpoint.

## Queries beyond the size

Media queries are not only based on size. If we want to base a prefix on something else, we can do so with a `raw` option.

Here is a configuration that adds a print mode:
```
module.exports = {
  theme: {
    extend: {
      screens: { 'print': {'raw': 'print'} },
    }
  }
}
```
We can then use this configuration like any other screen with `class="print:bg-white"`.

# The `screens` object

The `screens` object inside the key generates the breakpoints used for the responsive prefixes. The default looks like the one below:
```
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
     } 
   }
}
```
We can modify this in many ways but note that we need to provide the entire range of sizes if we modify the values here. If we only want to add a new size, we need to access the extensive subject of themes:
```
module.exports = {
  theme: {
    screens: {
      extend: {
        3xl: '2440px',
      }
    } 
  }
}
```

These breakpoints are a reasonable set of defaults, but if we only want to move the values around and about, we can do that here.

# Min and max values

We can also change the names of the keys to names of our choice, such as phone, landscape, tablet, and desktop. Those keys then become the names of our prefixes, so we’ll no longer write`sm:m-0`; we'll write `phone:m-0`.

If the value we provide for the screen width keys is a string, it’s considered the `min-width` of the breakpoint when generating the CSS. We can also pass an object with `min` and `max` keys if we specify the breakpoints differently. If we only specify `max` values, the responsive behavior is reversed. 

Unprefixed utilities apply at the largest size, and prefixes take effect as the screen gets smaller:
```
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '9999px'},
      'xl': {'max': '1535px'},
      'lg': {'max': '1023px'},
      'md': {'max': '767px'},
      'sm': {'max': '639px'},
    } 
  }
}
```

We can also supply a min value to those objects, limiting each breakpoint to a specific range. This means that we must specify all properties at each breakpoint.

# Queries beyond the size

Media queries are not only based on size. If we want to base a prefix on something else, we can do so with a `raw` option.

Here is a configuration that adds a print mode:
```
module.exports = {
  theme: {
    extend: {
      screens: { 'print': {'raw': 'print'} },
    }
  }
}
```
We can then use this configuration like any other screen with `class="print:bg-white"`.

Learn how to manage the screen width using screens objects, min, and max values.

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

Screen Width

The `screens` object

Build an Interactive E-Library Using Next.js and Tailwind

Screen Width

The screens object

The `screens` object