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.

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-12 width: 50%
w-13 width: 33.33333%
w-23 width: 66.66667%
w-14 width: 25%
w-34 width: 75%
w-15 width: 20%
w-25 width: 40%
w-35 width: 60%
w-45 width: 80%
w-16 width: 16.66667%
w-56 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:

Download my free CSS Handbook, and check out my premium courses