Tailwind CSS Cheatsheet - Utility Class Reference
Essential Tailwind CSS utility classes for atomic CSS, organized by function from layout to colors, responsive design to animations. Copy directly when building pages.
Back to Web ServicesLayout 7
containerResponsive container, auto-centered with max-width
block / inline-block / inlineDisplay types
hiddenHide element (display: none)
relative / absolute / fixed / stickyPositioning
overflow-auto / overflow-hiddenOverflow handling
visible / invisibleVisibility control
z-10 / z-50 / z-[-1]Z-index stacking order
Flexbox 7
flexEnable flexbox layout
flex-row / flex-colFlex direction (row/column)
flex-wrap / flex-nowrapWrap behavior
justify-start / justify-center / justify-between / justify-endMain axis alignment
items-start / items-center / items-endCross axis alignment
flex-1 / flex-auto / flex-noneFlex grow/shrink
gap-4 / gap-x-4 / gap-y-4Gap between items
Grid 7
gridEnable grid layout
grid-cols-3 / grid-cols-12Define column count
grid-rows-3Define row count
col-span-2 / col-span-fullColumn spanning
row-span-2 / row-span-fullRow spanning
place-items-center / place-content-centerGrid alignment
gap-4Grid gap
Spacing & Sizing 8
p-4 / px-4 / py-2 / pt-4Padding
m-4 / mx-auto / my-2 / mt-4Margin (mx-auto for horizontal centering)
space-x-4 / space-y-4Child spacing
w-64 / w-1/2 / w-full / w-screenWidth
h-64 / h-1/2 / h-full / h-screenHeight
max-w-lg / max-w-7xl / max-w-screen-xlMax width
min-h-screen / min-h-0Min height
size-8 / size-16Width and height together (Tailwind 3.4+)
Typography 9
text-xs / text-sm / text-base / text-lg / text-xl / text-2xl ... text-9xlFont size
font-thin / font-normal / font-medium / font-bold / font-blackFont weight
leading-none / leading-tight / leading-relaxed / leading-looseLine height
tracking-tight / tracking-wide / tracking-widerLetter spacing
text-left / text-center / text-right / text-justifyText alignment
underline / line-through / no-underlineText decoration
uppercase / lowercase / capitalizeText transform
truncateText overflow ellipsis (single line)
whitespace-nowrap / break-wordsWhitespace handling
Colors & Background 7
text-red-500 / text-blue-600 / text-gray-900Text color (50-900 scale)
bg-white / bg-gray-100 / bg-blue-500Background color
border-gray-300 / border-red-500Border color
ring-2 ring-blue-500Ring color and width (focus indicator)
shadow-sm / shadow-md / shadow-lg / shadow-xlBox shadow
opacity-50 / opacity-100Opacity
bg-gradient-to-r from-blue-500 to-purple-500Gradient background
Responsive & Interaction 9
sm: / md: / lg: / xl: / 2xl:Responsive breakpoint prefixes (mobile-first)
hover:bg-blue-500Hover state
focus:outline-none focus:ring-2Focus state
active:scale-95Active/click state
dark:bg-gray-800 dark:text-whiteDark mode
transition / transition-all / transition-colorsTransition animation
hover:scale-110 / hover:rotate-6Transform animation
animate-spin / animate-ping / animate-pulse / animate-bounceBuilt-in animations
cursor-pointer / cursor-not-allowedCursor style
Border & Effects 7
border / border-2 / border-4 / border-b-2Border width
border-solid / border-dashed / border-dotted / border-noneBorder style
rounded-sm / rounded / rounded-lg / rounded-xl / rounded-fullBorder radius
ring / ring-2 ring-insetRing outline for focus states
shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xlShadow size
outline / outline-2 outline-offset-2Outline
blur-sm / blur-lg / brightness-50 / contrast-125 / grayscaleFilter effects
💡 Tips
- Tailwind uses mobile-first responsive design: sm: ≥640px, md: ≥768px, lg: ≥1024px
- Use dark: prefix for dark mode, e.g. dark:bg-gray-800
- Use @apply directive to reuse Tailwind classes in CSS
- Common color scales: 50/100/200/300/400/500/600/700/800/900, higher = darker
- JIT mode only compiles classes you actually use, resulting in minimal CSS