Tailwind CSS Cheatsheet

Complete Tailwind CSS v3 reference — 300+ utility classes across 12 categories, full color palette, and responsive prefixes. Search and copy any class instantly.

356 entries

Color Palette — Click to Copy Class

Use as text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}, etc. Click a swatch to copy the class.

slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
ClassCSS OutputDescription
max-width: 100%; padding: 0 1rem (responsive)Responsive container that centers content
display: blockBlock-level element
display: inlineInline element
display: inline-blockInline block element
display: flexBlock-level flex container
display: inline-flexInline flex container
display: gridBlock-level grid container
display: inline-gridInline grid container
display: noneHide element completely
display: tableTable display
display: contentsChildren act as if the parent does not exist
position: staticDefault — follows normal document flow
position: relativePositioned relative to itself
position: absoluteRemoved from flow, positioned relative to nearest positioned ancestor
position: fixedRemoved from flow, positioned relative to viewport
position: stickyRelative until scroll threshold, then fixed
overflow: autoScroll when content overflows
overflow: hiddenClip content that overflows
overflow: visibleContent is not clipped (default)
overflow: scrollAlways show scrollbars
overflow-x: autoHorizontal scroll when needed
overflow-y: autoVertical scroll when needed
z-index: 0Z-index 0
z-index: 10Z-index 10
z-index: 20Z-index 20
z-index: 30Z-index 30
z-index: 40Z-index 40
z-index: 50Z-index 50
z-index: autoZ-index auto (default stacking context)
float: leftFloat element to the left
float: rightFloat element to the right
float: noneRemove float
clear: leftClear left floats
clear: rightClear right floats
clear: bothClear all floats
top: 0; right: 0; bottom: 0; left: 0Set all sides to 0 (fill parent when absolute/fixed)
top/right/bottom/left: 0Position an edge at 0
top: 100%Position top at 100% of parent height
isolation: isolateCreate a new stacking context
flex-direction: rowMain axis: horizontal (default)
flex-direction: row-reverseMain axis: horizontal, reversed
flex-direction: columnMain axis: vertical
flex-direction: column-reverseMain axis: vertical, reversed
flex-wrap: wrapItems wrap onto multiple lines
flex-wrap: wrap-reverseItems wrap in reverse direction
flex-wrap: nowrapItems stay on one line (default)
justify-content: flex-startAlign items at start of main axis
justify-content: flex-endAlign items at end of main axis
justify-content: centerCenter items along main axis
justify-content: space-betweenSpace between items, edges flush
justify-content: space-aroundEqual space around each item
justify-content: space-evenlyEqual space between all items including edges
align-items: flex-startCross-axis align: start
align-items: flex-endCross-axis align: end
align-items: centerCross-axis align: center
align-items: baselineCross-axis align: text baseline
align-items: stretchCross-axis align: stretch to fill (default)
align-content: flex-startPack rows at start (multi-line)
align-content: centerPack rows at center (multi-line)
align-content: space-betweenSpace between rows (multi-line)
align-self: autoInherit parent align-items
align-self: flex-startOverride alignment for this item: start
align-self: flex-endOverride alignment for this item: end
align-self: centerOverride alignment for this item: center
align-self: stretchOverride alignment for this item: stretch
flex: 1 1 0%Grow and shrink equally; ignore content size
flex: 1 1 autoGrow and shrink from natural size
flex: 0 1 autoShrink but do not grow (default)
flex: noneRigid — does not grow or shrink
flex-grow: 1Allow item to grow
flex-grow: 0Prevent item from growing
flex-shrink: 1Allow item to shrink (default)
flex-shrink: 0Prevent item from shrinking
order: -9999Move item to the visual start
order: 9999Move item to the visual end
order: 0Natural order (default)
gap: 1remGap between flex/grid items (4 = 1rem)
column-gap / row-gap: 1remAxis-specific gap
grid-template-columns: repeat(N, minmax(0, 1fr))N equal-width columns
grid-template-columns: noneNo column definition
grid-template-rows: repeat(N, minmax(0, 1fr))N equal-height rows
grid-column: autoAuto-placed column
grid-column: span N / span NColumn span of N
grid-column: 1 / -1Span all columns
grid-column-start: NStart at column line N
grid-column-end: NEnd at column line N
grid-row: span N / span NRow span of N
grid-row: 1 / -1Span all rows
place-items: centerCenter items on both axes
place-items: startAlign items at start on both axes
place-content: centerCenter tracks in both dimensions
grid-auto-columns: autoAuto-sized implicit columns
grid-auto-columns: minmax(0, 1fr)Fractional implicit columns
grid-auto-rows: autoAuto-sized implicit rows
grid-auto-rows: minmax(0, 1fr)Fractional implicit rows
grid-auto-flow: rowFill rows first (default)
grid-auto-flow: columnFill columns first
grid-auto-flow: denseFill gaps by backfilling
padding: 0px … 24remPadding on all sides (scale × 4px)
padding-left: 1rem; padding-right: 1remHorizontal padding (left + right)
padding-top: 1rem; padding-bottom: 1remVertical padding (top + bottom)
padding-top/right/bottom/left: 1remSingle-side padding
margin: 0px … 24remMargin on all sides
margin-left: auto; margin-right: autoCenter horizontally
margin-top: 1rem; margin-bottom: 1remVertical margin
margin-top/right/bottom/left: 1remSingle-side margin
margin: -1remNegative margin (pulls element outward)
margin-left: 1rem (on children, not first)Horizontal gap between children via margin
margin-top: 1rem (on children, not first)Vertical gap between children via margin
padding: 0pxAll-sides padding — 0 × 4px = 0px
padding: 2pxAll-sides padding — 0.5 × 4px = 2px
padding: 4pxAll-sides padding — 1 × 4px = 4px
padding: 6pxAll-sides padding — 1.5 × 4px = 6px
padding: 8pxAll-sides padding — 2 × 4px = 8px
padding: 10pxAll-sides padding — 2.5 × 4px = 10px
padding: 12pxAll-sides padding — 3 × 4px = 12px
padding: 16pxAll-sides padding — 4 × 4px = 16px
padding: 20pxAll-sides padding — 5 × 4px = 20px
padding: 24pxAll-sides padding — 6 × 4px = 24px
padding: 32pxAll-sides padding — 8 × 4px = 32px
padding: 40pxAll-sides padding — 10 × 4px = 40px
padding: 48pxAll-sides padding — 12 × 4px = 48px
padding: 64pxAll-sides padding — 16 × 4px = 64px
padding: 80pxAll-sides padding — 20 × 4px = 80px
padding: 96pxAll-sides padding — 24 × 4px = 96px
padding: 128pxAll-sides padding — 32 × 4px = 128px
width: autoNatural width (default)
width: 100%Full width of parent
width: 100vwFull viewport width
width: min-contentShrink to minimum content width
width: max-contentExpand to fit content
width: fit-contentFit content up to parent width
width: 50%Half the parent width
width: 33.333% / 66.667%Third-based widths
width: 25% / 75%Quarter-based widths
width: 0px … 24remFixed width values (scale × 4px)
height: autoNatural height
height: 100%Full height of parent
height: 100vhFull viewport height
height: 100dvhDynamic viewport height (handles mobile browser chrome)
height: 0px … 24remFixed height values
min-width: 0Allow flex items to shrink below content size
min-width: 100%Minimum full width
max-width: 384px … 1280pxNamed max-width breakpoints
max-width: 100%No wider than parent
max-width: 65chOptimal reading width (~65 characters)
min-height: 0Remove default minimum height
min-height: 100%At least full parent height
min-height: 100vhAt least full viewport height
aspect-ratio: autoNatural aspect ratio (default)
aspect-ratio: 1 / 1Square aspect ratio
aspect-ratio: 16 / 916:9 widescreen ratio
font-size: 0.75rem; line-height: 1remExtra small — 12px
font-size: 0.875rem; line-height: 1.25remSmall — 14px
font-size: 1rem; line-height: 1.5remBase — 16px (default)
font-size: 1.125rem; line-height: 1.75remLarge — 18px
font-size: 1.25rem; line-height: 1.75remXL — 20px
font-size: 1.5rem; line-height: 2rem2XL — 24px
font-size: 1.875rem; line-height: 2.25rem3XL — 30px
font-size: 2.25rem; line-height: 2.5rem4XL — 36px
font-size: 3rem; line-height: 15XL — 48px
font-size: 3.75rem; line-height: 16XL — 60px
font-size: 4.5rem; line-height: 17XL — 72px
font-size: 6rem; line-height: 18XL — 96px
font-size: 8rem; line-height: 19XL — 128px
font-weight: 100Hairline weight
font-weight: 200Extra-light weight
font-weight: 300Light weight
font-weight: 400Normal / regular weight (default)
font-weight: 500Medium weight
font-weight: 600Semi-bold weight
font-weight: 700Bold weight
font-weight: 800Extra-bold weight
font-weight: 900Heaviest / black weight
font-family: ui-sans-serif, system-ui, …System sans-serif stack
font-family: ui-serif, Georgia, …System serif stack
font-family: ui-monospace, SFMono-Regular, …Monospace stack
line-height: 1Tight / no leading
line-height: 1.25Tight line height
line-height: 1.375Snug line height
line-height: 1.5Normal line height
line-height: 1.625Relaxed line height (good for body copy)
line-height: 2Loose / very open line height
letter-spacing: -0.05emVery tight letter spacing
letter-spacing: -0.025emTight letter spacing
letter-spacing: 0emNormal letter spacing (default)
letter-spacing: 0.025emWide letter spacing
letter-spacing: 0.05emWider letter spacing
letter-spacing: 0.1emWidest letter spacing
text-align: leftLeft-align text
text-align: centerCenter text
text-align: rightRight-align text
text-align: justifyJustify text
text-align: startLogical start (LTR: left)
text-align: endLogical end (LTR: right)
text-decoration-line: underlineUnderline text
text-decoration-line: line-throughStrikethrough text
text-decoration-line: noneRemove text decoration
text-transform: uppercaseUPPERCASE text
text-transform: lowercaselowercase text
text-transform: capitalizeCapitalize First Letter
text-transform: noneRemove text transform
overflow: hidden; text-overflow: ellipsis; white-space: nowrapTruncate overflowing text with ellipsis
text-overflow: ellipsisEllipsis overflow (needs overflow: hidden)
white-space: nowrapPrevent text from wrapping
white-space: prePreserve whitespace and newlines
white-space: pre-wrapPreserve whitespace, wrap at line breaks
overflow-wrap: break-wordBreak long words to prevent overflow
word-break: break-allBreak at any character
font-style: italicItalic text
font-style: normalNormal (non-italic) text
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscaleSmooth font rendering
color: inheritInherit color from parent
color: currentColorUse current CSS color value
color: transparentTransparent text (useful for gradients)
background-color: transparentTransparent background
background-color: inheritInherit background from parent
background-color: currentColorUse current color as background
background-color: #fff / #000Pure white or black background
background-color: <color>Named color background, e.g. bg-blue-500
background-opacity: 0.550% background opacity (deprecated in v3.x — use bg-blue-500/50)
background-color: rgb(59 130 246 / 0.5)Background with opacity modifier
background-image: linear-gradient(to right, var(--tw-gradient-stops))Right-direction gradient
background-image: linear-gradient(to left, …)Left-direction gradient
background-image: linear-gradient(to top, …)Upward gradient
background-image: linear-gradient(to bottom, …)Downward gradient
background-image: linear-gradient(to top right / …)Diagonal gradient directions
--tw-gradient-from: #3b82f6Gradient start color
--tw-gradient-via: #a855f7Gradient midpoint color
--tw-gradient-to: #ec4899Gradient end color
background-size: coverScale to cover entire container
background-size: containScale to fit inside container
background-size: autoNatural background size
background-position: centerCenter background image
background-position: top / bottomPosition background at top or bottom
background-repeat: no-repeatNo background repeat
background-repeat: repeat / repeat-x / repeat-yRepeat background image
background-attachment: fixedBackground fixed to viewport (parallax)
border-width: 1px1px border on all sides
border-width: 0pxRemove border
border-width: 2px / 4px / 8pxThicker borders
border-top/right/bottom/left-width: 1pxSingle-side 1px border
border-left + border-right / border-top + border-bottomHorizontal or vertical borders
border-color: <color>Named color border, e.g. border-gray-200
border-style: solidSolid border style (default)
border-style: dashedDashed border style
border-style: dottedDotted border style
border-style: noneRemove border style
border-radius: 0No border radius
border-radius: 0.125rem2px radius — subtle
border-radius: 0.25rem4px radius — default
border-radius: 0.375rem6px radius — common for cards
border-radius: 0.5rem8px radius — pronounced
border-radius: 0.75rem12px radius — large
border-radius: 1rem16px radius — very large
border-radius: 1.5rem24px radius — huge
border-radius: 9999pxPill / circle shape
border-radius on top/bottom cornersPartial radius by side
border-top-left/top-right-radius: 0.5remSingle corner radius
outline: 2px solid transparent; outline-offset: 2pxRemove focus outline (use ring instead)
box-shadow: 0 0 0 Npx var(--tw-ring-color)Focus ring using box-shadow
box-shadow: inset 0 0 0 Npx …Ring on inside of element
--tw-ring-color: <color>Ring color, e.g. ring-blue-500
border on children (not first)Dividers between children using border
border-color: <color>Divider color
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)Subtle shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)Default shadow
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), …Medium shadow
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), …Large shadow
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), …XL shadow
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)2XL shadow — dramatic
box-shadow: 0 0 #0000Remove shadow
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)Inner shadow (pressed effect)
--tw-shadow-color: <color>Colored shadow, e.g. shadow-blue-500/50
opacity: 0Fully transparent
opacity: 0.25 / 0.5 / 0.75Partial opacity
opacity: 1Fully opaque (default)
filter: blur(4px)Small blur
filter: blur(8px)Default blur
filter: blur(12px … 64px)Larger blurs
filter: blur(0)Remove blur
filter: drop-shadow(…)Drop shadow (follows shape, not box)
filter: brightness(0.5 … 1.5)Adjust brightness
filter: contrast(0.5 … 1.5)Adjust contrast
filter: grayscale(100%)Full grayscale
filter: invert(100%)Invert colors
filter: saturate(N)Adjust color saturation
mix-blend-mode: multiply / screen / overlayBlend mode with element below
backdrop-filter: blur(…)Blur backdrop (frosted glass)
backdrop-filter: brightness(N)Adjust backdrop brightness
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150msDefault transition on common properties
transition-property: all; …Transition all properties
transition-property: color, background-color, border-color, …Transition color-related properties only
transition-property: opacity; …Transition opacity only
transition-property: transform; …Transition transform only
transition-property: noneDisable transitions
transition-duration: 75ms … 1000msTransition duration
transition-timing-function: linearLinear easing — constant speed
transition-timing-function: cubic-bezier(0.4, 0, 1, 1)Ease in — starts slow
transition-timing-function: cubic-bezier(0, 0, 0.2, 1)Ease out — ends slow
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)Ease in-out — slow at both ends (default)
transition-delay: 75ms … 1000msTransition start delay
animation: noneRemove animation
animation: spin 1s linear infiniteContinuous spin — loading indicators
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinitePing/ripple — notification badges
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infiniteFade in/out — skeleton loaders
animation: bounce 1s infiniteBounce up and down
transform: scaleX(N) scaleY(N)Scale transform
transform: rotate(Ndeg)Rotate transform
transform: translateX(1rem) / translateY(1rem)Translate on X or Y axis
transform: skewX(1deg) / skewY(1deg)Skew transform
transform-origin: center / top / …Transform origin point
cursor: autoBrowser decides cursor (default)
cursor: defaultArrow cursor
cursor: pointerPointer / hand cursor — for clickable elements
cursor: waitSpinning/busy cursor
cursor: textText insertion cursor
cursor: moveMove cursor
cursor: not-allowedBlocked action cursor
cursor: grab / grabbingDrag handle cursor
pointer-events: noneIgnore all mouse events
pointer-events: autoRestore mouse events (default)
user-select: nonePrevent text selection
user-select: textAllow text selection
user-select: allSelect all on click
user-select: autoDefault selection behavior
resize: nonePrevent resizing (e.g. textarea)
resize: bothAllow resize in both directions
resize: horizontal / verticalRestrict resize direction
scroll-behavior: smoothSmooth scrolling
scroll-behavior: autoInstant scrolling (default)
scroll-margin / scroll-padding: 1remAdjust scroll snap offset
scroll-snap-align: start / center / endScroll snap alignment
scroll-snap-type: x / y / both mandatoryEnable scroll snapping
touch-action: none / pan-x / pan-yControl touch/pointer behavior
appearance: noneRemove native browser styling (e.g. custom select)
outline: none / 1px solid / 2px solidFocus outline control
box-shadow: 0 0 0 2px … (on :focus)Focus ring — use instead of outline-none for accessibility
@media (min-width: 640px) { … }Apply from 640px (≥ small screens)
@media (min-width: 768px) { … }Apply from 768px (≥ medium screens)
@media (min-width: 1024px) { … }Apply from 1024px (≥ large screens)
@media (min-width: 1280px) { … }Apply from 1280px (≥ extra-large)
@media (min-width: 1536px) { … }Apply from 1536px (≥ 2x extra-large)
&:hover { … }Apply on mouse hover
&:focus { … }Apply on keyboard focus
&:focus-within { … }Apply when any child is focused
&:focus-visible { … }Apply only on keyboard focus (not mouse click)
&:active { … }Apply while being clicked
&:disabled { … }Apply to disabled form elements
.group:hover & { … }Apply when parent .group is hovered
.peer:checked ~ & { … }Apply when sibling .peer is checked
@media (prefers-color-scheme: dark) { … }Dark mode variant
@media print { … }Print media variant
@media (prefers-reduced-motion: no-preference / reduce) { … }Respect user motion preferences
:first-child / :last-child / :nth-child(odd) / :nth-child(even)Child position variants
e.g. w-[37px] or text-[#ff6600]Arbitrary value using square bracket syntax

Frequently Asked Questions

What version of Tailwind does this cheatsheet cover?

This cheatsheet covers Tailwind CSS v3, which is the most widely deployed version. Tailwind v3 introduced JIT (Just-In-Time) compilation, arbitrary value syntax (e.g. w-[37px]), and numerous new utilities like aspect-ratio, backdrop-blur, and scroll-snap classes.

How does the Tailwind color palette work?

Tailwind v3 ships with 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose). Each color has 11 shades from 50 (lightest) to 950 (darkest). Apply any color with a prefix like bg-, text-, border-, ring-, shadow-, from-, via-, to-.

What is the Tailwind spacing scale?

Tailwind's default spacing scale maps numbers to rem values where each unit equals 4px (0.25rem). So p-4 is 1rem (16px), m-8 is 2rem (32px), and so on. The scale includes fractional values (0.5, 1.5, 2.5, 3.5) and goes up to 96 (24rem / 384px). You can use arbitrary values like p-[17px] or m-[3.5rem] for any value not in the scale.

How do responsive prefixes work in Tailwind?

Tailwind uses a mobile-first approach. Breakpoints are min-width: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). A class without a prefix applies at all sizes. A class with a prefix like md:flex applies only when the viewport is 768px or wider. You can stack prefixes: sm:flex lg:grid applies flex from 640px and switches to grid at 1024px.

What is the arbitrary value syntax in Tailwind?

Square brackets let you use any CSS value that is not in Tailwind's scale: w-[37px], text-[#ff6600], bg-[url('/img.png')], grid-cols-[1fr_2fr_1fr]. This works with nearly every utility. Use underscores inside brackets to represent spaces in CSS values. Arbitrary values are compiled with JIT and do not bloat your CSS if unused.

Related Tools

CSS Flexbox CheatsheetCSS Grid CheatsheetCSS Formatter & Minifier