DevTools Surf logo
Sign in

Tailwind CSS Cheatsheet

Utility-first reference. Covers every major category: layout, flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, transforms, interactivity, SVG, accessibility, and variants. Compatible with Tailwind v3 and v4 (v4-only utilities tagged).

1 credit
Responsive breakpointsState variantsDisplayPositionOverflow & objectFloat, clear, containerFlexboxGridSpace between siblingsPadding & marginWidth & heightFontText layoutTypography detailColors (text, bg, border, …)BackgroundsBorders & radiiOutline & ringShadows, opacity, blendFiltersTransformsTransitions & animationInteractivityTablesSVGAccessibilityArbitrary values & CSS varsPseudo-elements & contentv4 additions (highlights)Config essentials (v3)@apply / @layer / @variantsDev ergonomics

Responsive breakpoints

9 items
sm (≥640px)
sm:flex sm:text-lg sm:px-6
md (≥768px)
md:grid-cols-2 md:gap-8
lg (≥1024px)
lg:flex-row lg:w-1/2
xl (≥1280px)
xl:container xl:text-xl
2xl (≥1536px)
2xl:max-w-screen-2xl
Min arbitrary
min-[720px]:flex
Max (cap at)
max-md:hidden max-lg:flex-col
Max arbitrary
max-[900px]:block
Mobile-first rule
Base = mobile. Add prefixes for larger.
Design small-first; override up.

State variants

23 items
Hovercommon
hover:bg-primary/90 hover:underline
Focusa11y
focus:ring-2 focus:outline-none
Focus-visiblea11y
focus-visible:ring-2
Keyboard focus only — hides on click
Focus-within
focus-within:ring-2
Active / visited
active:scale-95 visited:text-purple-700
Disabled / enabled
disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:bg-primary
Checkedform
checked:bg-primary checked:border-transparent
Placeholder-shown
placeholder-shown:border-muted
Invalid / required / valid
invalid:border-red-500 required:bg-amber-50 valid:border-emerald-500
Read-only
read-only:bg-muted
First / last / only
first:pt-0 last:border-0 only:mx-auto
Odd / even
odd:bg-muted/30 even:bg-muted/10
Empty
empty:hidden
Target
target:ring-2
Open (<details>, <dialog>)
open:bg-muted
Group + peercompose
group group-hover:visible peer peer-checked:border-primary
Data attribute
data-[state=open]:rotate-180
ARIA attribute
aria-expanded:rotate-90 aria-disabled:opacity-60
Motion
motion-safe:animate-spin motion-reduce:animate-none
Print
print:hidden print:text-black
Dark mode
dark:bg-slate-900 dark:text-white
Negationv4+
not-first:pl-4 not-last:mr-2 not-hover:opacity-50
Supportsprogressive
supports-[display:grid]:grid

Display

8 items
Block / inline
block inline-block inline
Flex
flex inline-flex
Grid
grid inline-grid
Table parts
table table-row table-cell table-caption table-header-group table-footer-group
List item
list-item
Hidden
hidden (display: none)
Contents
contents (element box disappears; children promote)
Flow-root
flow-root (new BFC — clears floats)

Position

6 items
Positioning
static relative absolute fixed sticky
Top/right/etc.
top-0 right-4 bottom-2 left-1/2 -top-2
Inset shorthand
inset-0 inset-x-4 inset-y-0 inset-1/2
Z-index
z-0 z-10 z-20 z-30 z-40 z-50 z-auto -z-10 z-[60]
Visibility
visible invisible collapse
Isolation
isolate isolation-auto

Overflow & object

8 items
Overflow
overflow-auto overflow-hidden overflow-clip overflow-visible overflow-scroll
Overflow x/y
overflow-x-auto overflow-y-hidden
Overscroll
overscroll-none overscroll-contain overscroll-y-auto
Object-fit
object-contain object-cover object-fill object-none object-scale-down
Object-position
object-top object-center object-bottom object-left object-right object-[25%_75%]
Aspect ratio
aspect-auto aspect-square aspect-video aspect-[4/3]
Box sizing
box-border box-content
Box decoration
box-decoration-clone box-decoration-slice

Float, clear, container

6 items
Float
float-left float-right float-none float-start float-end
Clear
clear-left clear-right clear-both clear-none clear-start clear-end
Container
container (sets max-width to the current breakpoint)
Combine with `mx-auto px-4` in most designs
Columns
columns-1 columns-2 … columns-12 columns-auto columns-3xs columns-2xs columns-xs … columns-7xl
Break inside
break-inside-auto break-inside-avoid break-inside-avoid-page break-inside-avoid-column
Break before/after
break-after-page break-before-column break-after-avoid

Flexbox

10 items
Direction
flex-row flex-row-reverse flex-col flex-col-reverse
Wrap
flex-wrap flex-wrap-reverse flex-nowrap
Flex shorthand
flex-1 flex-auto flex-initial flex-none flex-[2_1_0%]
Grow / shrink
grow grow-0 shrink shrink-0
Order
order-1 … order-12 order-first order-last order-none
Basis
basis-0 basis-1/2 basis-1/3 basis-full basis-auto basis-64 basis-[10ch]
Justify content
justify-start justify-end justify-center justify-between justify-around justify-evenly justify-normal justify-stretch
Align items
items-start items-end items-center items-baseline items-stretch
Align self
self-auto self-start self-center self-end self-stretch self-baseline
Gap
gap-0 gap-1 gap-2 … gap-96 gap-x-4 gap-y-2 gap-[18px]

Grid

9 items
Template cols
grid-cols-1 … grid-cols-12 grid-cols-none grid-cols-subgrid (v4) grid-cols-[200px_1fr_auto]
Template rows
grid-rows-1 … grid-rows-6 grid-rows-none grid-rows-subgrid (v4)
Column span
col-auto col-span-1 … col-span-12 col-span-full
Column start/end
col-start-1 … col-start-13 col-end-1 … col-end-13
Row span
row-auto row-span-1 … row-span-6 row-span-full
Auto flow
grid-flow-row grid-flow-col grid-flow-dense grid-flow-row-dense grid-flow-col-dense
Auto cols/rows
auto-cols-auto auto-cols-min auto-cols-max auto-cols-fr auto-rows-*
Justify / align (grid)
justify-items-center place-items-center place-content-between place-self-end
Named areas
grid-areas-[...] (v4) — define via template

Space between siblings

3 items
Horizontal / vertical
space-x-0 … space-x-96 space-y-4 space-x-px space-y-[18px]
Reverse (flex-row-reverse)
space-x-reverse space-y-reverse
Divide (border between)
divide-x divide-y divide-x-2 divide-y-4 divide-slate-200 divide-dashed divide-y-reverse

Padding & margin

6 items
Paddingscale
p-0 p-px p-0.5 p-1 p-2 p-4 p-8 p-16 p-96 p-[13px]
Padding axis
px-4 py-2 ps-4 (start) pe-2 (end)
Padding side
pt-0 pr-1 pb-2 pl-4
Margin
m-0 m-auto m-4 m-96 -m-2 (negative) m-[5vh]
Margin axis/side
mx-auto my-4 mt/mr/mb/ml-* ms-/me-*
Scale valuesscale
0, px, 0.5, 1..4 (0.25rem steps), 5..12 (0.25rem), 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96

Width & height

11 items
Width (fixed)
w-0 w-px w-1 w-8 w-64 w-96
Width (fractions)
w-1/2 w-1/3 w-2/3 w-1/4 … w-11/12 w-full
Width (viewport)v3.4+
w-screen w-svw w-lvw w-dvw
Width (intrinsic)
w-auto w-min w-max w-fit
Min / max width
min-w-0 min-w-full min-w-fit max-w-xs..7xl max-w-prose max-w-screen-md max-w-none
Height (fixed)
h-0 h-px h-4 h-64 h-96
Height (viewport)
h-screen h-svh h-lvh h-dvh
Height (intrinsic)
h-auto h-min h-max h-fit
Min / max height
min-h-0 min-h-screen min-h-dvh max-h-96 max-h-screen
Size shorthandv3.4+
size-4 size-10 size-full (sets w + h together)
Arbitrary
w-[125px] h-[calc(100vh-3rem)] max-w-[72ch]

Font

6 items
Family
font-sans font-serif font-mono
Size
text-xs text-sm text-base text-lg text-xl text-2xl text-3xl … text-9xl text-[17px]
Weight
font-thin extralight light normal medium semibold bold extrabold black
Style
italic not-italic
Smoothing
antialiased subpixel-antialiased
Variant numeric
normal-nums ordinal slashed-zero lining-nums oldstyle-nums proportional-nums tabular-nums diagonal-fractions stacked-fractions

Text layout

9 items
Align
text-left text-center text-right text-justify text-start text-end
Wrapv3.4+
text-wrap text-nowrap text-balance text-pretty
Whitespace
whitespace-normal nowrap pre pre-line pre-wrap break-spaces
Word break
break-normal break-words break-all break-keep
Hyphens
hyphens-none hyphens-manual hyphens-auto
Overflow
truncate text-ellipsis text-clip
Line clamp
line-clamp-1 … line-clamp-6 line-clamp-none
Indent
indent-0 indent-px indent-4 indent-8 -indent-4 indent-[2ch]
Vertical-align
align-baseline align-top align-middle align-bottom align-text-top align-text-bottom align-sub align-super

Typography detail

10 items
Letter spacing
tracking-tighter tighter tight normal wide wider widest
Line height
leading-3 … leading-10 leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose
Text transform
uppercase lowercase capitalize normal-case
Text decoration
underline overline line-through no-underline
Decoration color
decoration-current decoration-transparent decoration-slate-500 decoration-[#xxx]
Decoration style
decoration-solid decoration-dashed dotted double wavy
Decoration thickness
decoration-auto decoration-from-font decoration-0 1 2 4 8
Underline offset
underline-offset-auto 0 1 2 4 8
List style
list-disc list-decimal list-none
List position
list-inside list-outside

Colors (text, bg, border, …)

10 items
Palettespalette
slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose
Scale (per palette)
50 100 200 300 400 500 600 700 800 900 950
Specials
inherit current transparent black white
With opacity
bg-primary/10 text-white/80 border-slate-200/50
Text color
text-slate-900 text-emerald-500 text-current
Background
bg-white bg-blue-500 bg-[#1d4ed8]
Border color
border-slate-200 border-inherit
Placeholder
placeholder-slate-400 placeholder:italic
Caret
caret-primary caret-transparent
Accent
accent-primary (native inputs — checkbox, progress)

Backgrounds

9 items
Attachment
bg-fixed bg-local bg-scroll
Clip
bg-clip-border bg-clip-padding bg-clip-content bg-clip-text
Origin
bg-origin-border bg-origin-padding bg-origin-content
Position
bg-bottom bg-center bg-left bg-left-bottom bg-left-top bg-right bg-top bg-[25%_75%]
Repeat
bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y bg-repeat-round bg-repeat-space
Size
bg-auto bg-cover bg-contain bg-[length:200px_auto]
Image (gradient)
bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-l bg-gradient-to-tl
Gradient stops
from-pink-500 via-purple-500 to-violet-500 from-10% via-30% to-90%
Image (custom)
bg-[url('data:,')] bg-none
Replace data:, with your own URL — e.g. url('/hero.webp'). Keep it absolute so Next/Webpack passes it through.

Borders & radii

7 items
Radius (uniform)
rounded-none rounded-sm rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-3xl rounded-full
Radius per corner
rounded-t-lg rounded-r-lg rounded-b-lg rounded-l-lg rounded-tl-lg rounded-tr-lg rounded-bl-lg rounded-br-lg
Radius logical
rounded-s rounded-e rounded-ss rounded-se rounded-es rounded-ee
Width (all)
border-0 border border-2 border-4 border-8 border-[3px]
Width per side
border-t-2 border-r border-b-0 border-l-4 border-x-2 border-y
Style
border-solid border-dashed border-dotted border-double border-hidden border-none
Color
border-slate-200 border-transparent border-current border-[#xxx]

Outline & ring

6 items
Outline width
outline-0 outline-1 outline-2 outline-4 outline-8 outline outline-none
Outline style
outline-solid outline-dashed outline-dotted outline-double
Outline color
outline-primary outline-offset-2
Ring
ring ring-0 ring-1 ring-2 ring-4 ring-8 ring-inset
Ring color
ring-primary ring-primary/50
Ring offset
ring-offset-0 ring-offset-2 ring-offset-white

Shadows, opacity, blend

6 items
Box shadow
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner shadow-none
Shadow color
shadow-primary/25 shadow-black/50
Opacity
opacity-0 opacity-25 opacity-50 opacity-75 opacity-100 opacity-[0.65]
Mix blend mode
mix-blend-normal mix-blend-multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
Bg blend mode
bg-blend-normal bg-blend-multiply …
Text shadow
text-shadow-[0_1px_2px_rgba(0,0,0,0.5)] (arbitrary only)

Filters

9 items
Apply filter
filter filter-none
Blur
blur-none blur-sm blur blur-md blur-lg blur-xl blur-2xl blur-3xl blur-[2px]
Brightness
brightness-0 brightness-50 brightness-100 brightness-150 brightness-200
Contrast
contrast-0 50 100 150 200
Grayscale / invert / sepia
grayscale grayscale-0 invert invert-0 sepia sepia-0
Hue rotate
hue-rotate-0 15 30 60 90 180 -hue-rotate-60 hue-rotate-[72deg]
Saturate
saturate-0 50 100 150 200
Drop shadow
drop-shadow-sm drop-shadow drop-shadow-md lg xl 2xl none
Backdrop variants
backdrop-blur backdrop-brightness backdrop-contrast backdrop-grayscale backdrop-hue-rotate backdrop-invert backdrop-opacity backdrop-saturate backdrop-sepia

Transforms

7 items
Enable (legacy)
transform transform-gpu transform-none (v3 only — v4 auto)
Scale
scale-0 scale-50 scale-75 scale-90 scale-95 scale-100 scale-105 scale-110 scale-125 scale-150 -scale-100
Scale axis
scale-x-100 scale-y-50
Rotate
rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12 rotate-45 rotate-90 rotate-180 -rotate-45 rotate-[17deg]
Translate
translate-x-1/2 translate-y-full -translate-y-1/4 translate-x-[-50%]
Skew
skew-x-0 skew-x-1 skew-x-12 -skew-y-6 skew-y-[9deg]
Origin
origin-center top bottom left right top-left top-right bottom-left bottom-right

Transitions & animation

6 items
Property
transition transition-none transition-all transition-colors transition-opacity transition-shadow transition-transform
Duration
duration-75 100 150 200 300 500 700 1000 duration-[250ms]
Easing
ease-linear ease-in ease-out ease-in-out ease-[cubic-bezier(0.4,0,0.2,1)]
Delay
delay-75 100 150 200 300 500 700 1000
Animate
animate-none animate-spin animate-ping animate-pulse animate-bounce
Custom keyframes
theme.extend.keyframes + theme.extend.animation in tailwind.config

Interactivity

11 items
Cursor
cursor-auto default pointer wait text move help not-allowed none context-menu progress cell crosshair vertical-text alias copy no-drop grab grabbing all-scroll col-resize row-resize n-resize e-resize s-resize w-resize ne-resize nw-resize se-resize sw-resize ew-resize ns-resize nesw-resize nwse-resize zoom-in zoom-out
Pointer events
pointer-events-none pointer-events-auto
Resize
resize-none resize-y resize-x resize
User select
select-none select-text select-all select-auto
Appearance
appearance-none appearance-auto
Touch action
touch-auto touch-none touch-pan-x touch-pan-left touch-pan-right touch-pan-y touch-pan-up touch-pan-down touch-pinch-zoom touch-manipulation
Will change
will-change-auto will-change-scroll will-change-contents will-change-transform
Caret color
caret-primary caret-transparent
Scroll behavior
scroll-auto scroll-smooth
Scroll margin / padding
scroll-mt-16 scroll-pt-16 scroll-mx-4 scroll-py-2
Scroll snap
snap-none snap-x snap-y snap-both snap-mandatory snap-proximity snap-start snap-end snap-center snap-align-none snap-normal snap-always

Tables

4 items
Border collapse
border-collapse border-separate
Border spacing
border-spacing-0 border-spacing-px border-spacing-1 border-spacing-2 border-spacing-[7px] border-spacing-x-1 border-spacing-y-4
Layout
table-auto table-fixed
Caption side
caption-top caption-bottom

SVG

3 items
Fill
fill-none fill-current fill-inherit fill-transparent fill-slate-900 fill-[#xxx]
Stroke color
stroke-current stroke-slate-400 stroke-[#xxx]
Stroke width
stroke-0 stroke-1 stroke-2 stroke-[1.5]

Accessibility

3 items
Screen reader
sr-only not-sr-only
Visually hidden but still announced
Forced colors
forced-color-adjust-auto forced-color-adjust-none
Focus ring patternpattern
outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

Arbitrary values & CSS vars

7 items
Arbitrary value
w-[137px] text-[#bada55] grid-cols-[auto_1fr_auto] hover:bg-[url('data:,')]
CSS var reference
bg-[var(--brand)] text-[var(--accent)] rounded-[var(--r)]
Typed arbitrary
bg-[image:url('data:,')] bg-[length:200px_auto] text-[color:var(--x)]
Arbitrary variant
[&:nth-child(3)]:bg-red-500 [&>svg]:text-current
data-* variant
data-[state=open]:bg-primary
aria-* variant
aria-checked:border-primary aria-expanded:rotate-180
group tag
group/item group-hover/item:visible (named groups for nested contexts)

Pseudo-elements & content

9 items
::before / ::after
before:content-['→'] before:mr-2 after:content-[''] after:block
Empty content
after:content-[''] (required for ::after to render without text)
CSS var content
content-[var(--prefix)]
First-letter / line
first-letter:uppercase first-line:font-bold
Selection
selection:bg-primary selection:text-white
Marker (list)
marker:text-primary marker:font-bold
File input
file:mr-2 file:rounded-full file:bg-primary
Placeholder
placeholder:italic placeholder:text-slate-400
Backdrop (<dialog>)
backdrop:bg-black/50 backdrop:blur-sm

v4 additions (highlights)

6 items
Starting stylev4
starting:opacity-0 (for @starting-style transitions)
Container queries (built-in)v4
@container @sm:grid-cols-2 @md:flex @[400px]:…
field-sizingv4
field-sizing-content (textarea auto-grow)
Dynamic utility valuesv4
grid-cols-15 mt-17 (non-preset numbers now work)
CSS-first configv4
@theme { --font-display: 'Inter'; } — no JS tailwind.config required
3D transformsv4
rotate-x-12 rotate-y-45 translate-z-4 perspective-normal

Config essentials (v3)

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: { brand: { 50: "#f0f9ff", 500: "#0ea5e9", 900: "#0c4a6e" } },
      fontFamily: { sans: ["Geist", "system-ui"] },
      keyframes: { shake: { "0%,100%": { transform: "translateX(0)" }, "50%": { transform: "translateX(-4px)" } } },
      animation: { shake: "shake 0.4s ease-in-out" },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

@apply / @layer / @variants

css
@layer components {
  .btn {
    @apply inline-flex items-center gap-2 rounded-md bg-primary px-3 py-1.5
           text-sm font-medium text-primary-foreground
           hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring;
  }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
}

Prefer pure utility classes in components; reserve @apply for truly repeated multi-utility patterns.

Dev ergonomics

  • Install `prettier-plugin-tailwindcss` — sorts classes deterministically (saves bikeshedding in reviews).
  • IntelliSense extension (VS Code / JetBrains) autocompletes classes + shows resolved CSS on hover.
  • `cn()` helper (from clsx + tailwind-merge) handles conditional classes and dedupes conflicting utilities.
  • Use `group` + `peer` to avoid state-lifting to parent components.
  • Reach for `@apply` only when a 5+ utility combo repeats across many files.
  • `tailwindcss/no-custom-classname` ESLint rule catches typos at build time.

Further reading

Tailwind official docsTailwind Play (REPL)nerdcave cheatsheetHeroicons

Related Cheatsheets Tools

Git CheatsheetDocker CheatsheetRegex CheatsheetMarkdown CheatsheetVim CheatsheetBash / Shell CheatsheetSQL Cheatsheetkubectl Cheatsheet