← Home
Tailwind CSS Classes Cheatsheet
Complete Tailwind CSS utility class reference — spacing, typography, colors, layout, flexbox, grid, borders, effects, and responsive breakpoints.
Spacing
p-{n}Padding on all sides. Values: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, px, autopx-{n} / py-{n}Padding horizontal (left + right) / vertical (top + bottom)pt-{n} / pr-{n} / pb-{n} / pl-{n}Padding on individual sides (top, right, bottom, left)m-{n}Margin on all sides. Same scale as padding. Supports negative values: -m-4mx-{n} / my-{n}Margin horizontal / vertical. mx-auto centers a block elementmt-{n} / mr-{n} / mb-{n} / ml-{n}Margin on individual sidesgap-{n}Gap between flex/grid children. gap-x-{n} and gap-y-{n} for axis-specificspace-x-{n}Horizontal space between children (adds margin-left to all but first)space-y-{n}Vertical space between children (adds margin-top to all but first)Typography
text-xsFont size 0.75rem (12px) with line-height 1rem (16px)text-smFont size 0.875rem (14px) with line-height 1.25rem (20px)text-baseFont size 1rem (16px) with line-height 1.5rem (24px)text-lgFont size 1.125rem (18px) with line-height 1.75rem (28px)text-xl / text-2xl / text-3xl1.25rem / 1.5rem / 1.875rem. Up to text-9xl (8rem)text-4xl / text-5xl / text-6xl2.25rem / 3rem / 3.75rem with tight line-heighttext-7xl / text-8xl / text-9xl4.5rem / 6rem / 8rem for display headingsfont-thin / font-light / font-normalFont weight 100 / 300 / 400font-medium / font-semibold / font-boldFont weight 500 / 600 / 700font-extrabold / font-blackFont weight 800 / 900font-sans / font-serif / font-monoFont family: system sans-serif / serif / monospaceleading-none / leading-tight / leading-snugLine-height: 1 / 1.25 / 1.375leading-normal / leading-relaxed / leading-looseLine-height: 1.5 / 1.625 / 2tracking-tighter / tracking-tight / tracking-normalLetter-spacing: -0.05em / -0.025em / 0emtracking-wide / tracking-wider / tracking-widestLetter-spacing: 0.025em / 0.05em / 0.1emtext-left / text-center / text-right / text-justifyText alignmentuppercase / lowercase / capitalize / normal-caseText transformtruncateOverflow hidden + text ellipsis + whitespace nowrapline-clamp-{n}Truncate text after n lines with ellipsis (1–6)Colors
text-{color}-{shade}Text color. Colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rosetext-white / text-black / text-transparentSpecial text color valuestext-inherit / text-currentInherit from parent / use currentColorbg-{color}-{shade}Background color. Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950bg-white / bg-black / bg-transparentSpecial background color valuesbg-gradient-to-{dir}Gradient direction: t, tr, r, br, b, bl, l, tlfrom-{color}-{shade} / via-{color}-{shade} / to-{color}-{shade}Gradient color stopsborder-{color}-{shade}Border color with same color palette and shadesring-{color}-{shade}Box-shadow ring colorplaceholder-{color}-{shade}Placeholder text colortext-{color}-{shade}/{opacity}Color with opacity modifier, e.g., text-blue-500/50 for 50% opacityLayout
block / inline-block / inlineDisplay: block / inline-block / inlineflex / inline-flexDisplay: flex / inline-flexgrid / inline-gridDisplay: grid / inline-gridhiddenDisplay: none — completely hides the elementcontainerSets max-width to current breakpoint. Centers with mx-autow-{n} / w-full / w-screen / w-autoWidth: fixed value / 100% / 100vw / auto. Also w-1/2, w-1/3, w-2/3, etc.h-{n} / h-full / h-screen / h-autoHeight: fixed value / 100% / 100vh / automin-w-0 / min-w-full / min-w-min / min-w-maxMinimum width constraintsmax-w-xs / max-w-sm / max-w-md / max-w-lg / max-w-xlMax-width: 20rem / 24rem / 28rem / 32rem / 36remmax-w-2xl / max-w-3xl / max-w-4xl / max-w-5xl / max-w-6xl / max-w-7xlMax-width: 42rem → 80remmax-w-full / max-w-screen-sm / max-w-screen-md / max-w-screen-lgMax-width: 100% / breakpoint-sizedmin-h-0 / min-h-full / min-h-screenMinimum height: 0 / 100% / 100vhoverflow-hidden / overflow-auto / overflow-scroll / overflow-visibleOverflow behaviorrelative / absolute / fixed / stickyPosition typetop-{n} / right-{n} / bottom-{n} / left-{n}Position offset (use with absolute/fixed/sticky)z-0 / z-10 / z-20 / z-30 / z-40 / z-50 / z-autoZ-index stacking orderFlexbox
flex-row / flex-row-reverseFlex direction: horizontal (default) / reversedflex-col / flex-col-reverseFlex direction: vertical / reversed verticalflex-wrap / flex-wrap-reverse / flex-nowrapWhether flex items wrap to new linesjustify-start / justify-end / justify-centerMain-axis alignment: start / end / centerjustify-between / justify-around / justify-evenlyMain-axis: space-between / space-around / space-evenlyitems-start / items-end / items-centerCross-axis alignment: start / end / centeritems-baseline / items-stretchCross-axis: baseline alignment / stretch to fillflex-1flex: 1 1 0% — grow and shrink, ignoring initial sizeflex-autoflex: 1 1 auto — grow and shrink, considering initial sizeflex-initialflex: 0 1 auto — shrink but don't grow (default)flex-noneflex: none — don't grow or shrinkflex-grow / flex-grow-0Allow item to grow / prevent growingflex-shrink / flex-shrink-0Allow item to shrink / prevent shrinkingorder-{n} / order-first / order-last / order-noneVisual order of flex itemsself-auto / self-start / self-end / self-center / self-stretchOverride align-items for individual itemgap-{n}Gap between flex children (same as grid gap)Grid
grid-cols-{n}Define grid columns (1–12). grid-cols-3 = 3 equal columnsgrid-cols-noneNo explicit column templategrid-rows-{n}Define grid rows (1–6). grid-rows-3 = 3 equal rowsgrid-rows-noneNo explicit row templatecol-span-{n}Span n columns (1–12). col-span-full spans all columnscol-start-{n} / col-end-{n}Set column start/end line (1–13)row-span-{n}Span n rows (1–6). row-span-full spans all rowsrow-start-{n} / row-end-{n}Set row start/end line (1–7)gap-{n} / gap-x-{n} / gap-y-{n}Grid gap (all / column / row)auto-cols-auto / auto-cols-min / auto-cols-max / auto-cols-frSize of implicitly-created columnsauto-rows-auto / auto-rows-min / auto-rows-max / auto-rows-frSize of implicitly-created rowsgrid-flow-row / grid-flow-col / grid-flow-denseHow auto-placed items flow in the gridplace-content-center / place-items-centerShorthand to center grid content/items on both axesBorders & Rounded
border / border-0 / border-2 / border-4 / border-8Border width: 1px / 0 / 2px / 4px / 8pxborder-t / border-r / border-b / border-lBorder on individual sides (default 1px)border-t-2 / border-r-4 / border-b-8Specific border width per sideborder-solid / border-dashed / border-dotted / border-double / border-noneBorder stylerounded / rounded-md / rounded-lg / rounded-xl / rounded-2xl / rounded-3xlBorder radius: 0.25rem → 1.5remrounded-none / rounded-smNo radius / 0.125remrounded-fullBorder radius 9999px — fully rounded (circles/pills)rounded-t-{size} / rounded-b-{size} / rounded-l-{size} / rounded-r-{size}Radius on specific sidesdivide-x / divide-yAdd borders between children (horizontal / vertical)divide-x-2 / divide-y-2Thicker dividers between children (2px)divide-{color}-{shade}Divider colorring-0 / ring-1 / ring-2 / ring / ring-4 / ring-8Box-shadow ring widthring-insetMove ring to inside the elementring-offset-{n}Add gap between element and ring (1, 2, 4, 8)outline-none / outline / outline-dashed / outline-dottedOutline style (useful for focus states)Effects & Transitions
shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xlBox shadow size (smallest to largest)shadow-inner / shadow-noneInner shadow / no shadowopacity-0 / opacity-25 / opacity-50 / opacity-75 / opacity-100Element opacity (0%–100%)blur-sm / blur / blur-md / blur-lg / blur-xl / blur-2xl / blur-3xlBlur filterbrightness-{n} / contrast-{n} / saturate-{n}Filter adjustments: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200backdrop-blur-{size}Blur behind element (for frosted glass effect)transitionTransition: color, background, border, text-decoration, fill, stroke, opacity, shadow, transform, filtertransition-colors / transition-opacity / transition-transform / transition-allSpecific transition propertiesduration-75 / duration-100 / duration-150 / duration-200 / duration-300 / duration-500 / duration-700 / duration-1000Transition duration in msease-linear / ease-in / ease-out / ease-in-outTransition timing functiondelay-75 / delay-100 / delay-150 / delay-200 / delay-300 / delay-500 / delay-700 / delay-1000Transition delay in mshover:{utility}Apply utility on hover (e.g., hover:bg-blue-600)focus:{utility}Apply utility on focus (e.g., focus:ring-2)active:{utility}Apply utility on active/pressed statedark:{utility}Apply utility in dark mode (e.g., dark:bg-gray-900)group-hover:{utility}Apply when parent .group is hoveredResponsive Breakpoints
sm:{utility}@media (min-width: 640px) — Small screens and upmd:{utility}@media (min-width: 768px) — Medium screens and uplg:{utility}@media (min-width: 1024px) — Large screens and upxl:{utility}@media (min-width: 1280px) — Extra-large screens and up2xl:{utility}@media (min-width: 1536px) — 2x extra-large screens and upmax-sm:{utility}@media (max-width: 639px) — Below small breakpoint onlymax-md:{utility}@media (max-width: 767px) — Below medium breakpoint onlymax-lg:{utility}@media (max-width: 1023px) — Below large breakpoint onlyMobile-first pattern: w-full md:w-1/2 lg:w-1/3Full width on mobile, half on medium, third on largeStacking: flex flex-col md:flex-rowColumn layout on mobile, row on medium+Visibility: hidden md:blockHidden on mobile, visible from medium upTypography: text-sm md:text-base lg:text-lgResponsive font sizes across breakpointsFrequently Asked Questions
What is the difference between p-4 and px-4 in Tailwind?
p-4 adds 1rem (16px) padding on all four sides. px-4 adds 1rem padding only on the left and right (horizontal). Similarly, py-4 applies to top and bottom (vertical). You can also use pt-, pr-, pb-, pl- for individual sides.
How does Tailwind's responsive design system work?
Tailwind uses a mobile-first approach with min-width breakpoints. Unprefixed utilities apply to all screen sizes. Prefixed utilities like md:flex only apply at that breakpoint and above. For example, 'hidden md:block' hides an element on mobile and shows it on screens ≥768px.
Can I use custom values not in Tailwind's default scale?
Yes. Use arbitrary values with square bracket notation, e.g., w-[137px], text-[#1da1f2], grid-cols-[200px_1fr_200px]. You can also extend the theme in tailwind.config.js to add custom values to any utility scale.
What is the difference between gap, space-x, and divide?
gap-{n} uses CSS gap (works with flex and grid). space-x-{n} adds margin-left to all children except the first (flex only, breaks with flex-wrap). divide-x adds border-left between children. For modern layouts, gap is generally preferred.