Cheatsheet

# Layout
flex flex-col items-center justify-between
grid grid-cols-3 gap-4
container mx-auto px-4

# Spacing (m, mx, my, mt, mr, mb, ml)
p-4 px-6 py-2
m-4 mx-auto my-6

# Sizing
w-full h-12 w-1/2 max-w-md min-h-screen aspect-square aspect-video

# Typography
text-sm text-base text-lg text-2xl
font-medium font-semibold font-bold
leading-tight tracking-tight
text-gray-900 text-blue-600 text-red-500

# Background + borders
bg-white bg-gray-50 bg-gradient-to-r from-blue-500 to-purple-500
border border-gray-200 rounded rounded-lg rounded-full
ring-2 ring-blue-500 ring-offset-2

# Effects
shadow-sm shadow shadow-md shadow-xl
opacity-50 hover:opacity-100
transition transition-all duration-200 ease-out
transform scale-105 rotate-3

# State variants
hover:bg-gray-100 focus:ring-2 focus:outline-none active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed
group-hover:text-blue-600

# Responsive (mobile first)
sm:flex md:grid-cols-2 lg:grid-cols-3 xl:max-w-7xl

# Dark mode (with darkMode: 'class')
bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100

# Container queries (v4)
@container @md:flex @md:gap-4

# Arbitrary values - when no token fits
top-[117px] grid-cols-[200px_1fr_200px] text-[#fafafa]

# Common patterns
# Card:      rounded-xl border bg-white p-6 shadow-sm
# Button:    rounded px-4 py-2 font-medium transition focus:ring-2
# Input:     rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500
# Avatar:    h-10 w-10 rounded-full
# Center:    mx-auto max-w-prose

# Useful CLI
# npx tailwindcss -i src/app.css -o dist/app.css --watch
# Plugins: @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio

<!-- p-4 m-2 flex grid items-center bg-* text-* rounded shadow hover:* md:* dark:* -->