Skip to content

The Tailwind Cheat Sheet

The Valley of Code

Your Web Development Manual

Reference list of common CSS properties you'll want to use in Tailwind, and their relative classes

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)

SymbolDescription
pPadding
mMargin
-mNegative margin
SymbolDescription
tTop
rRight
bBottom
lLeft
xHorizontal
yVertical
ValueDescription
00
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
328rem
px1px
autoauto

margin: 0 auto

I sometimes use margin: 0 auto to center things.

The class mx-auto applies it.

Width

ClassCSS
w-1width: 0.25rem
w-2width: 0.5rem
w-3width: 0.75rem
w-4width: 1rem
w-6width: 1.5rem
w-8width: 2rem
w-10width: 2.5rem
w-12width: 3rem
w-16width: 4rem
w-24width: 6rem
w-32width: 8rem
w-48width: 12rem
w-64width: 16rem
w-autowidth: auto
w-pxwidth: 1px
w-1/2width: 50%
w-1/3width: 33.33333%
w-2/3width: 66.66667%
w-1/4width: 25%
w-3/4width: 75%
w-1/5width: 20%
w-2/5width: 40%
w-3/5width: 60%
w-4/5width: 80%
w-1/6width: 16.66667%
w-5/6width: 83.33333%
w-fullwidth: 100%
w-screenwidth: 100vw

Max Width

ClassCSS
max-w-xsmax-width: 20rem
max-w-smmax-width: 30rem
max-w-mdmax-width: 40rem
max-w-lgmax-width: 50rem
max-w-xlmax-width: 60rem
max-w-2xlmax-width: 70rem
max-w-3xlmax-width: 80rem
max-w-4xlmax-width: 90rem
max-w-5xlmax-width: 100rem
max-w-fullmax-width: 100%

Min width

ClassCSS
min-w-0min-width: 0
min-w-fullmin-width: 100%

Font Family

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

Font Size

ClassCSS
text-xsfont-size: .75rem
text-smfont-size: .875rem
text-basefont-size: 1rem
text-lgfont-size: 1.125rem
text-xlfont-size: 1.25rem
text-2xlfont-size: 1.5rem
text-3xlfont-size: 1.875rem
text-4xlfont-size: 2.25rem
text-5xlfont-size: 3rem

Font weight

ClassCSS
font-hairlinefont-weight: 100
font-thinfont-weight: 200
font-lightfont-weight: 300
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
font-extraboldfont-weight: 800
font-blackfont-weight: 900

Colors

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

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:

Text color

Prepend text- to any color

Background color

Prepend bg- to any color

Center text

Use text-center

Line Height

ClassCSS
.leading-noneline-height: 1
.leading-tightline-height: 1.25
.leading-normalline-height: 1.5
.leading-looseline-height: 2

Flexbox

Container

ClassCSS
flexdisplay: flex
inline-flexdisplay: inline-flex

Items

Direction

ClassCSS
flex-rowflex-direction: row
flex-row-reverseflex-direction: row-reverse
flex-colflex-direction: column
flex-col-reverseflex-direction: column-reverse

Wrapping

ClassCSS
flex-no-wrapflex-wrap: nowrap
flex-wrapflex-wrap: wrap
flex-wrap-reverseflex-wrap: wrap-reverse

Align items

ClassCSS
items-stretchalign-items: stretch
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
items-baselinealign-items: baseline

Align content

ClassCSS
content-startalign-content: flex-start
content-centeralign-content: center
content-endalign-content: flex-end
content-betweenalign-content: space-between
content-aroundalign-content: space-around

Align self

ClassCSS
self-autoalign-self: auto
self-startalign-self: flex-start
self-centeralign-self: center
self-endalign-self: flex-end
self-stretchalign-self: stretch

Justify content

ClassCSS
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around

Flex, grow, shrink

ClassCSS
flex-initialflex: initial
flex-1flex: 1
flex-autoflex: auto
flex-noneflex: none
flex-growflex-grow: 1
flex-shrinkflex-shrink: 1
flex-no-growflex-grow: 0
flex-no-shrinkflex-shrink: 0

Modifiers

Hover

hover:

β†’ Get my CSS Handbook
β†’ Read my CSS Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)