Tailwind Cheat Sheet

Quick reference for the most-used Tailwind CSS classes

p-4padding: 1rem

px-4padding-left/right: 1rem

py-2padding-top/bottom: 0.5rem

m-4margin: 1rem

mx-automargin-left/right: auto

gap-4gap: 1rem

space-x-2margin-left on siblings

flexdisplay: flex

griddisplay: grid

grid-cols-3grid-template-columns: repeat(3, 1fr)

items-centeralign-items: center

justify-betweenjustify-content: space-between

flex-colflex-direction: column

flex-1flex: 1 1 0%

text-smfont-size: 0.875rem

text-lgfont-size: 1.125rem

text-2xlfont-size: 1.5rem

font-boldfont-weight: 700

font-monofont-family: monospace

text-centertext-align: center

tracking-tightletter-spacing: -0.025em

bg-whitebackground-color: white

bg-stone-100background-color: #f5f5f4

text-stone-900color: #1c1917

text-stone-500color: #78716c

border-stone-200border-color: #e7e5e4

bg-amber-500background-color: #f59e0b

rounded-xlborder-radius: 0.75rem

rounded-fullborder-radius: 9999px

borderborder-width: 1px

shadow-smsmall box shadow

shadow-lglarge box shadow

This tool runs entirely in your browser. No data is sent anywhere.