Tailwind CSS Cheatsheet - Utility Class Reference
For developers adopting atomic CSS who prefer not to write large stylesheet files. Tailwind folds styles into composable utility classes and, with JIT, emits only what is used — which means you must grasp breakpoint prefixes, dark-mode variants, and state utilities like group-hover. By the end you can assemble responsive layouts directly, toggle dark mode, control spacing and color, and know why mixed-use with semantic classes needs explicit conventions.
Layout 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
Official References
Each command links to its official documentation below, so you can verify the latest usage and read deeper.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Contact Us
Wrong command or description? Send us corrections, business inquiries or product feedback by email.
Contact Us