All Cheat Sheets
Tailwind CSS Cheat Sheet
Tailwind CSS utility class reference — spacing, colors, typography, layout, responsive, and dark mode.
Layout
Flex center
flex items-center justify-centerGrid 3-col
grid grid-cols-3 gap-4Container
container mx-auto px-4Hidden
hidden md:blockPosition
relative / absolute / fixed / stickyZ-index
z-10 / z-50Spacing
Padding
p-4 px-6 py-2 pt-8Margin
m-4 mx-auto my-2 mt-8Gap
gap-4 gap-x-2 gap-y-6Space between
space-x-4 / space-y-2Typography
Font size
text-sm / text-base / text-xl / text-3xlFont weight
font-normal / font-medium / font-boldColor
text-zinc-400 / text-white / text-blue-500Align
text-left / text-center / text-rightLine clamp
line-clamp-2 / line-clamp-3Truncate
truncateSizing
Width
w-full / w-1/2 / w-64 / w-screenHeight
h-full / h-screen / h-64Max width
max-w-md / max-w-4xl / max-w-noneMin height
min-h-screenVisual
Background
bg-zinc-900 / bg-blue-500/10Border
border border-white/10 rounded-xlShadow
shadow-lg / shadow-blue-500/20Opacity
opacity-50 / opacity-0Ring
ring-1 ring-white/10Gradient
bg-gradient-to-r from-blue-500 to-purple-500Responsive & States
Breakpoints
sm: md: lg: xl: 2xl:640 768 1024 1280 1536pxHover
hover:bg-blue-600Focus
focus:ring-2 focus:outline-noneDark mode
dark:bg-zinc-900 dark:text-whiteGroup hover
group-hover:text-blue-400Transitions
transition-all duration-200