# The Tailwind Cheat Sheet

> A Tailwind cheat sheet mapping the CSS properties you use most, like margin, padding, width, colors, and flexbox, to their matching utility classes.

Author: Flavio Copes | Published: 2018-07-09 | Updated: 2019-12-03 | Canonical: https://flaviocopes.com/tailwind-cheat-sheet/

I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to remind a particular class (I'm starting out and I don't have muscle memory yet for it)

Here are the things I use the most.

<!-- TOC -->

- [Margin and Padding](#margin-and-padding)
  - [margin: 0 auto](#margin-0-auto)
- [Width](#width)
- [Max Width](#max-width)
- [Min width](#min-width)
- [Font Family](#font-family)
- [Font Size](#font-size)
- [Font weight](#font-weight)
- [Colors](#colors)
- [Text color](#text-color)
- [Background color](#background-color)
- [Center text](#center-text)
- [Line Height](#line-height)
- [Flexbox](#flexbox)
  - [Container](#container)
  - [Items](#items)
    - [Direction](#direction)
    - [Wrapping](#wrapping)
    - [Align items](#align-items)
    - [Align content](#align-content)
    - [Align self](#align-self)
    - [Justify content](#justify-content)
    - [Flex, grow, shrink](#flex-grow-shrink)
- [Modifiers](#modifiers)
  - [Hover](#hover)

<!-- /TOC -->



## Margin and Padding

Compose those 3 tables. Add a dash before the value (e.g. `pt-2`, `m-auto`)

Symbol | Description
---------|----------
 `p` | Padding
 `m` | Margin
 `-m` | Negative margin

Symbol | Description
---------|----------
t | Top
r | Right
b | Bottom
l | Left
x | Horizontal
y | Vertical

Value | Description
---------|----------
0 | `0`
1 | `0.25rem`
2 | `0.5rem`
3 | `0.75rem`
4 | `1rem`
5 | `1.25rem`
6 | `1.5rem`
8 | `2rem`
10 | `2.5rem`
12 | `3rem`
16 | `4rem`
20 | `5rem`
24 | `6rem`
32 | `8rem`
px | `1px`
auto | `auto`

### margin: 0 auto

I sometimes use `margin: 0 auto` to center things.

The class `mx-auto` applies it.

## Width

Class | CSS
---------|----------
w-1 | `width: 0.25rem`
w-2 | `width: 0.5rem`
w-3 | `width: 0.75rem`
w-4 | `width: 1rem`
w-6 | `width: 1.5rem`
w-8 | `width: 2rem`
w-10 | `width: 2.5rem`
w-12 | `width: 3rem`
w-16 | `width: 4rem`
w-24 | `width: 6rem`
w-32 | `width: 8rem`
w-48 | `width: 12rem`
w-64 | `width: 16rem`
w-auto | `width: auto`
w-px | `width: 1px`
w-1/2 | `width: 50%`
w-1/3 | `width: 33.33333%`
w-2/3 | `width: 66.66667%`
w-1/4 | `width: 25%`
w-3/4 | `width: 75%`
w-1/5 | `width: 20%`
w-2/5 | `width: 40%`
w-3/5 | `width: 60%`
w-4/5 | `width: 80%`
w-1/6 | `width: 16.66667%`
w-5/6 | `width: 83.33333%`
w-full | `width: 100%`
w-screen | `width: 100vw`

## Max Width

Class | CSS
---------|----------
max-w-xs | `max-width: 20rem`
max-w-sm | `max-width: 30rem`
max-w-md | `max-width: 40rem`
max-w-lg | `max-width: 50rem`
max-w-xl | `max-width: 60rem`
max-w-2xl | `max-width: 70rem`
max-w-3xl | `max-width: 80rem`
max-w-4xl | `max-width: 90rem`
max-w-5xl | `max-width: 100rem`
max-w-full | `max-width: 100%`

## Min width

Class | CSS
---------|----------
min-w-0 | `min-width: 0`
min-w-full | `min-width: 100%`

## Font Family

Class | CSS
---------|----------
font-sans |	`font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
font-serif | 	`font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;`
font-mono |	`font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;`

## Font Size

Class | CSS
---------|----------
text-xs | `font-size: .75rem`
text-sm | `font-size: .875rem`
text-base | `font-size: 1rem`
text-lg | `font-size: 1.125rem`
text-xl | `font-size: 1.25rem`
text-2xl | `font-size: 1.5rem`
text-3xl | `font-size: 1.875rem`
text-4xl | `font-size: 2.25rem`
text-5xl | `font-size: 3rem`

## Font weight

Class | CSS
---------|----------
font-hairline |  `font-weight: 100`
font-thin |  `font-weight: 200`
font-light |  `font-weight: 300`
font-normal |  `font-weight: 400`
font-medium |  `font-weight: 500`
font-semibold |  `font-weight: 600`
font-bold |  `font-weight: 700`
font-extrabold |  `font-weight: 800`
font-black |  `font-weight: 900`

## Colors

Tailwind provides us those classes we can use to match the corresponding color:

- `transparent`
- `black`
- `gray`
- `white`
- `red`
- `orange`
- `yellow`
- `green`
- `teal`
- `blue`
- `indigo`
- `purple`
- `pink`

> Warning: `gray` was `grey` before TailWind 1.0. Keep this in mind if you have an older project around.

Every color has various levels. You can use `-100` up to `-900` to make the color go from less intense to more intense:

- `orange-100`
- `orange-200`
- `orange-300`
- `orange-400`
- `orange-500`
- `orange-600`
- `orange-700`
- `orange-800`
- `orange-900`

## Text color

Prepend `text-` to any color

## Background color

Prepend `bg-` to any color

## Center text

Use `text-center`

## Line Height

Class | CSS
---------|----------
.leading-none | `line-height: 1`
.leading-tight | `line-height: 1.25`
.leading-normal | `line-height: 1.5`
.leading-loose | `line-height: 2`

## Flexbox

### Container

Class | CSS
---------|----------
flex | `display: flex`
inline-flex | `display: inline-flex`

### Items

#### Direction

Class | CSS
---------|----------
flex-row | `flex-direction: row`
flex-row-reverse | `flex-direction: row-reverse`
flex-col | `flex-direction: column`
flex-col-reverse | `flex-direction: column-reverse`

#### Wrapping

Class | CSS
---------|----------
flex-no-wrap | `flex-wrap: nowrap`
flex-wrap | `flex-wrap: wrap`
flex-wrap-reverse | `flex-wrap: wrap-reverse`

#### Align items

Class | CSS
---------|----------
items-stretch | `align-items: stretch`
items-start | `align-items: flex-start`
items-center | `align-items: center`
items-end | `align-items: flex-end`
items-baseline | `align-items: baseline`

#### Align content

Class | CSS
---------|----------
content-start | `align-content: flex-start`
content-center | `align-content: center`
content-end | `align-content: flex-end`
content-between | `align-content: space-between`
content-around | `align-content: space-around`

#### Align self

Class | CSS
---------|----------
self-auto | `align-self: auto`
self-start | `align-self: flex-start`
self-center | `align-self: center`
self-end | `align-self: flex-end`
self-stretch | `align-self: stretch`

#### Justify content

Class | CSS
---------|----------
justify-start | `justify-content: flex-start`
justify-center | `justify-content: center`
justify-end | `justify-content: flex-end`
justify-between | `justify-content: space-between`
justify-around | `justify-content: space-around`

#### Flex, grow, shrink

Class | CSS
---------|----------
flex-initial | `flex: initial`
flex-1 | `flex: 1`
flex-auto | `flex: auto`
flex-none | `flex: none`
flex-grow | `flex-grow: 1`
flex-shrink | `flex-shrink: 1`
flex-no-grow | `flex-grow: 0`
flex-no-shrink | `flex-shrink: 0`

## Modifiers

### Hover

`hover:`