← Back to all tools

Tailwind CSS Cheatsheet

Quick reference for utility classes

Responsive Breakpoints

PrefixMin WidthCSS
sm:640px@media (min-width: 640px)
md:768px@media (min-width: 768px)
lg:1024px@media (min-width: 1024px)
xl:1280px@media (min-width: 1280px)
2xl:1536px@media (min-width: 1536px)

Spacing Scale

p-0, m-00px
p-px, m-px1px
p-0.5, m-0.50.125rem (2px)
p-1, m-10.25rem (4px)
p-2, m-20.5rem (8px)
p-3, m-30.75rem (12px)
p-4, m-41rem (16px)
p-5, m-51.25rem (20px)
p-6, m-61.5rem (24px)
p-8, m-82rem (32px)
p-10, m-102.5rem (40px)
p-12, m-123rem (48px)
p-16, m-164rem (64px)
p-20, m-205rem (80px)
p-24, m-246rem (96px)

Flexbox

flexdisplay: flex
inline-flexdisplay: inline-flex
flex-rowflex-direction: row
flex-colflex-direction: column
flex-wrapflex-wrap: wrap
flex-nowrapflex-wrap: nowrap
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
gap-1gap: 0.25rem
gap-2gap: 0.5rem
gap-4gap: 1rem
flex-1flex: 1 1 0%
flex-autoflex: 1 1 auto
flex-noneflex: none

Grid

griddisplay: grid
grid-cols-1grid-template-columns: repeat(1, 1fr)
grid-cols-2grid-template-columns: repeat(2, 1fr)
grid-cols-3grid-template-columns: repeat(3, 1fr)
grid-cols-4grid-template-columns: repeat(4, 1fr)
grid-cols-12grid-template-columns: repeat(12, 1fr)
col-span-1grid-column: span 1
col-span-2grid-column: span 2
col-span-fullgrid-column: 1 / -1

Typography

text-xsfont-size: 0.75rem
text-smfont-size: 0.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
font-thinfont-weight: 100
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
text-lefttext-align: left
text-centertext-align: center
text-righttext-align: right
leading-tightline-height: 1.25
leading-normalline-height: 1.5
leading-relaxedline-height: 1.625

Colors (text-*, bg-*, border-*)

slate-50
slate-500
slate-900
red-500
orange-500
yellow-500
green-500
teal-500
blue-500
violet-500
pink-500
white

Width & Height

w-fullwidth: 100%
w-screenwidth: 100vw
w-autowidth: auto
w-1/2width: 50%
w-1/3width: 33.333%
w-1/4width: 25%
h-fullheight: 100%
h-screenheight: 100vh
min-h-screenmin-height: 100vh
max-w-smmax-width: 24rem
max-w-mdmax-width: 28rem
max-w-lgmax-width: 32rem
max-w-xlmax-width: 36rem
max-w-7xlmax-width: 80rem

Borders & Radius

borderborder-width: 1px
border-2border-width: 2px
border-tborder-top-width: 1px
roundedborder-radius: 0.25rem
rounded-mdborder-radius: 0.375rem
rounded-lgborder-radius: 0.5rem
rounded-xlborder-radius: 0.75rem
rounded-fullborder-radius: 9999px