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

## Transformation
CSS allows us to transform the box of an element in various ways, changing its size, location, rotation, or skew. Tailwind provides some reasonable defaults that are combined with transitions and animation to easily build some great effects.

All of these transformation utilities need to be combined with `.transform`, which in turn needs to be declared as a class in the same element—for example, `"transform scale-100"`.

## Changing the scale

Tailwind lets us change the scale of an element with the `.scale-{percentage}` family, where the suffix is the percentage to scale. The options are `0`, `50`, `75`, `90`, `95`, `100`, `105`, `110`, `125`, and `150`. These are designed to allow for subtle effects, such as  `"transform transition duration-1000 hover:scale-110"`. These are used to make an element get slightly bigger on hover over the course of a second. When we add in `hover:box-shadow-lg`, it seems like the element is getting closer to the user when they hover over it.

If we only want to scale in one direction, we can use `.scale-x-{percentage}` or `.scale-y-{percentage} `with the same set of numbers `scale-x-95`, `scale-y-125`, and so on.

## Rotating

We can rotate an element with `.rotate-{degrees}`, which is a clockwise transformation of a number of degrees. The options are `0`, `1`, `2`, `3`, `6`, `12`, `45`, `90`, and `180`. A counter-clockwise rotation is achieved with `.-rotate-{degrees}` and the same numbers.

The design here is to make it easy for small effects. The rotation is, by default, around an axis in the middle of the element, which Tailwind denotes as `.origin-center`. We can move the origin around by adding the suffixes for the same four directions and four corners that we have seen elsewhere to `.origin-`—for example, `.origin-top`, `.origin-bottom-right`, and so on).

## Skew and translate

For skew, we have `.skew-x-{degrees}`, `.-skew-x-{degrees}`, `.skew-y-{degrees}`, and `.-skew-y-{degrees}`.These take the numerical suffixes `0`, `1`, `2`, `3`, `6`, or `12` as the number of degrees in the skew.

We can flat-out move an element with `.translate-x-{size}`, `.-translate-x-{size}`, `.translate-y-{size}`, or `.-translate-y-{size}`, each of which takes a numerical suffix. This moves the element along the direction using the same number scale we have seen for padding, margins, and the like, where each number represents 0.25rem. Positive directions are right and down, and negative directions are left and up.

In addition to the number set, we have suffixes—`px` to move it a single pixel, `full` to move the exact amount of its size in that dimension, and `1/2` to move it half the amount of its size in that dimension. For example, we can use `translate-x-full` or `translate-y-1/2`.

We’ll try the following animation attributes in the playground below:


- Create a button with color effects for transition with a duration of 500 milliseconds with a skew of 12​​ along the y-axis:
  - `transition-color`, `duration-500`, and `skew-y-12`

- Create a button with opacity effects for transition with a duration of 500 milliseconds with a scale by a factor of 125% along the y-axis:
  - `transition-opacity`, `duration-500`, and `scale-y-125`

- Create a button that is rotated by 45 and translated in the horizontal direction by the button’s size:
  - `rotate-45`, `translate-x-full`

Other structural attributes of buttons are provided in the code below:


# Transformation
CSS allows us to transform the box of an element in various ways, changing its size, location, rotation, or skew. Tailwind provides some reasonable defaults that are combined with transitions and animation to easily build some great effects.

All of these transformation utilities need to be combined with `.transform`, which in turn needs to be declared as a class in the same element—for example, `"transform scale-100"`.

# Changing the scale

Tailwind lets us change the scale of an element with the `.scale-{percentage}` family, where the suffix is the percentage to scale. The options are `0`, `50`, `75`, `90`, `95`, `100`, `105`, `110`, `125`, and `150`. These are designed to allow for subtle effects, such as  `"transform transition duration-1000 hover:scale-110"`. These are used to make an element get slightly bigger on hover over the course of a second. When we add in `hover:box-shadow-lg`, it seems like the element is getting closer to the user when they hover over it.

If we only want to scale in one direction, we can use `.scale-x-{percentage}` or `.scale-y-{percentage} `with the same set of numbers `scale-x-95`, `scale-y-125`, and so on.

# Rotating

We can rotate an element with `.rotate-{degrees}`, which is a clockwise transformation of a number of degrees. The options are `0`, `1`, `2`, `3`, `6`, `12`, `45`, `90`, and `180`. A counter-clockwise rotation is achieved with `.-rotate-{degrees}` and the same numbers.

The design here is to make it easy for small effects. The rotation is, by default, around an axis in the middle of the element, which Tailwind denotes as `.origin-center`. We can move the origin around by adding the suffixes for the same four directions and four corners that we have seen elsewhere to `.origin-`—for example, `.origin-top`, `.origin-bottom-right`, and so on).

# Skew and translate

For skew, we have `.skew-x-{degrees}`, `.-skew-x-{degrees}`, `.skew-y-{degrees}`, and `.-skew-y-{degrees}`.These take the numerical suffixes `0`, `1`, `2`, `3`, `6`, or `12` as the number of degrees in the skew.

We can flat-out move an element with `.translate-x-{size}`, `.-translate-x-{size}`, `.translate-y-{size}`, or `.-translate-y-{size}`, each of which takes a numerical suffix. This moves the element along the direction using the same number scale we have seen for padding, margins, and the like, where each number represents 0.25rem. Positive directions are right and down, and negative directions are left and up.

In addition to the number set, we have suffixes—`px` to move it a single pixel, `full` to move the exact amount of its size in that dimension, and `1/2` to move it half the amount of its size in that dimension. For example, we can use `translate-x-full` or `translate-y-1/2`.

We’ll try the following animation attributes in the playground below:


- Create a button with color effects for transition with a duration of 500 milliseconds with a skew of 12​​ along the y-axis:
  - `transition-color`, `duration-500`, and `skew-y-12`

- Create a button with opacity effects for transition with a duration of 500 milliseconds with a scale by a factor of 125% along the y-axis:
  - `transition-opacity`, `duration-500`, and `scale-y-125`

- Create a button that is rotated by 45 and translated in the horizontal direction by the button’s size:
  - `rotate-45`, `translate-x-full`

Other structural attributes of buttons are provided in the code below:


Learn about the animation utilities to transform, scale, rotate, skew, and translate the elements.

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

Animation Properties

Transformation

Changing the scale