1: Fundamentals
2: HTML and CSS
3: Tools
4: Deployment
5: JavaScript
6: More JavaScript
7: TypeScript
8: Python
9: More Python
10: PHP
11: More CSS
12: DOM and Events
13: Networking
14: Browser API
15: Server Runtimes
16: HTTP Servers
17: Forms
18: Databases
19: Libraries and frameworks
20: Docker
21: Go
22: C
23: Linux
24: Swift
25: Electronics
26: Misc

Copyright 2025

The Valley of Code

A Flavio Copes project

changelog

legacy pro user?

The Tailwind Cheat Sheet
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:

  • 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

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:

Join my AI Workshop !

The Web Development BOOTCAMP cohort starts in February 2026