Tailwind CSS Cheatsheet

Your quick reference guide to Tailwind CSS classes

Tailwind Colors

bg-red-500

bg-blue-500

bg-yellow-500

bg-gray-500

bg-green-500

bg-indigo-500

bg-purple-500

bg-pink-500

bg-teal-500

bg-cyan-500

bg-orange-500

bg-lime-500

bg-emerald-500

bg-violet-500

bg-fuchsia-500

bg-rose-500

bg-amber-500

bg-sky-500

bg-slate-500

bg-zinc-500

bg-neutral-500

bg-stone-500

bg-white

bg-black

Tailwind Color Reference

slate

slate-100:#f1f5f9
slate-200:#e2e8f0
slate-300:#cbd5e1
slate-400:#94a3b8
slate-500:#64748b
slate-600:#475569
slate-700:#334155
slate-800:#1e293b
slate-900:#0f172a

gray

gray-100:#f3f4f6
gray-200:#e5e7eb
gray-300:#d1d5db
gray-400:#9ca3af
gray-500:#6b7280
gray-600:#4b5563
gray-700:#374151
gray-800:#1f2937
gray-900:#111827

zinc

zinc-100:#f4f4f5
zinc-200:#e4e4e7
zinc-300:#d4d4d8
zinc-400:#a1a1aa
zinc-500:#71717a
zinc-600:#52525b
zinc-700:#3f3f46
zinc-800:#27272a
zinc-900:#18181b

red

red-100:#fee2e2
red-200:#fecaca
red-300:#fca5a5
red-400:#f87171
red-500:#ef4444
red-600:#dc2626
red-700:#b91c1c
red-800:#991b1b
red-900:#7f1d1d

orange

orange-100:#ffedd5
orange-200:#fed7aa
orange-300:#fdba74
orange-400:#fb923c
orange-500:#f97316
orange-600:#ea580c
orange-700:#c2410c
orange-800:#9a3412
orange-900:#7c2d12

amber

amber-100:#fef3c7
amber-200:#fde68a
amber-300:#fcd34d
amber-400:#fbbf24
amber-500:#f59e0b
amber-600:#d97706
amber-700:#b45309
amber-800:#92400e
amber-900:#78350f

blue

blue-100:#dbeafe
blue-200:#bfdbfe
blue-300:#93c5fd
blue-400:#60a5fa
blue-500:#3b82f6
blue-600:#2563eb
blue-700:#1d4ed8
blue-800:#1e40af
blue-900:#1e3a8a

indigo

indigo-100:#e0e7ff
indigo-200:#c7d2fe
indigo-300:#a5b4fc
indigo-400:#818cf8
indigo-500:#6366f1
indigo-600:#4f46e5
indigo-700:#4338ca
indigo-800:#3730a3
indigo-900:#312e81

purple

purple-100:#f3e8ff
purple-200:#e9d5ff
purple-300:#d8b4fe
purple-400:#c084fc
purple-500:#a855f7
purple-600:#9333ea
purple-700:#7e22ce
purple-800:#6b21a8
purple-900:#581c87

green

green-100:#dcfce7
green-200:#bbf7d0
green-300:#86efac
green-400:#4ade80
green-500:#22c55e
green-600:#16a34a
green-700:#15803d
green-800:#166534
green-900:#14532d

emerald

emerald-100:#d1fae5
emerald-200:#a7f3d0
emerald-300:#6ee7b7
emerald-400:#34d399
emerald-500:#10b981
emerald-600:#059669
emerald-700:#047857
emerald-800:#065f46
emerald-900:#064e3b