Tailwind CSS Cheatsheet

Borders, Shadows, Effects

Use this Tailwind CSS reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

Border Width

Class	CSS
`border`	`border-width: 1px`
`border-0`	`border-width: 0`
`border-2`	`border-width: 2px`
`border-4`	`border-width: 4px`
`border-8`	`border-width: 8px`
`border-[3px]`	arbitrary
`border-t`	`border-top-width: 1px`
`border-t-2`	`border-top-width: 2px`
`border-r`	`border-right-width: 1px`
`border-b`	`border-bottom-width: 1px`
`border-l`	`border-left-width: 1px`
`border-x`	left + right 1px
`border-y`	top + bottom 1px
`border-s`	`border-inline-start-width: 1px` (logical)
`border-e`	`border-inline-end-width: 1px` (logical)

<div class="border border-slate-200 rounded-lg p-4">Default card border</div>
<div class="border-t-2 border-blue-500 pt-4">Top accent border</div>
<div class="border-l-4 border-amber-500 pl-4">Left accent border</div>

Border Color

<div class="border border-slate-300">Light gray border</div>
<div class="border border-blue-500">Blue border</div>
<div class="border border-red-500/50">Red border at 50% opacity</div>
<div class="border border-[#d4af37]">Arbitrary color</div>
<div class="border border-current">Inherits text color</div>

Side-specific colors:

<div class="border-t-blue-500 border-b-slate-200">...</div>

Border Style

Class	CSS
`border-solid`	`border-style: solid`
`border-dashed`	`border-style: dashed`
`border-dotted`	`border-style: dotted`
`border-double`	`border-style: double`
`border-hidden`	`border-style: hidden`
`border-none`	`border-style: none`

<div class="border-2 border-dashed border-slate-400 rounded-xl p-8 text-center">
  Dashed drop zone
</div>

Border Radius

v4 scale (v4 renamed the small end: v3 rounded-sm → v4 rounded-xs, v3 bare rounded → v4 rounded-sm):

Class (v4)	CSS
`rounded-none`	`border-radius: 0`
`rounded-xs`	`border-radius: 0.125rem` (v3: `rounded-sm`)
`rounded-sm`	`border-radius: 0.25rem` (v3: `rounded`)
`rounded-md`	`border-radius: 0.375rem`
`rounded-lg`	`border-radius: 0.5rem`
`rounded-xl`	`border-radius: 0.75rem`
`rounded-2xl`	`border-radius: 1rem`
`rounded-3xl`	`border-radius: 1.5rem`
`rounded-4xl`	`border-radius: 2rem` (v4 only)
`rounded-full`	`border-radius: 9999px` (pill / circle)
`rounded-[12px]`	arbitrary

Per-corner and Per-side

Class	Corners
`rounded-t-lg`	top-left + top-right
`rounded-b-lg`	bottom-left + bottom-right
`rounded-l-lg`	top-left + bottom-left
`rounded-r-lg`	top-right + bottom-right
`rounded-tl-lg`	top-left only
`rounded-tr-lg`	top-right only
`rounded-br-lg`	bottom-right only
`rounded-bl-lg`	bottom-left only
`rounded-ss-lg`	start-start (logical)
`rounded-se-lg`	start-end (logical)

<!-- Pill button -->
<button class="rounded-full px-6 py-2 bg-blue-600 text-white">Go</button>

<!-- Avatar -->
<img class="size-12 rounded-full object-cover" src="avatar.jpg" alt="">

<!-- Card with only top-rounded corners -->
<div class="rounded-t-xl overflow-hidden">...</div>

Divide (Between Children)

Adds borders between adjacent flex/grid children without touching the outer edge.

Class	CSS
`divide-x`	right border on all children except last
`divide-x-2`	2px version
`divide-y`	bottom border on all children except last
`divide-y-2`	2px version
`divide-y-reverse`	for `flex-col-reverse`
`divide-slate-200`	border color
`divide-solid`	border style
`divide-dashed`	dashed style
`divide-dotted`	dotted style
`divide-opacity-50`	(legacy — use color `/` modifier)

<!-- Vertical dividers in a flex nav -->
<nav class="flex divide-x divide-slate-200">
  <a class="px-4 py-2">Home</a>
  <a class="px-4 py-2">About</a>
  <a class="px-4 py-2">Blog</a>
</nav>

<!-- Horizontal dividers in a list -->
<ul class="divide-y divide-slate-100">
  <li class="py-3">Item 1</li>
  <li class="py-3">Item 2</li>
  <li class="py-3">Item 3</li>
</ul>

Outline

Applied via focus states; appears outside the border.

Class	CSS
`outline-none`	`outline-style: none` in v4 (v3's invisible-outline trick is now `outline-hidden`)
`outline-hidden`	invisible outline that still shows in forced-colors mode (v4)
`outline`	`outline-style: solid; outline-width: 1px`
`outline-dashed`	`outline-style: dashed`
`outline-dotted`	`outline-style: dotted`
`outline-double`	`outline-style: double`
`outline-0`	`outline-width: 0`
`outline-1`	`outline-width: 1px`
`outline-2`	`outline-width: 2px`
`outline-4`	`outline-width: 4px`
`outline-8`	`outline-width: 8px`
`outline-blue-500`	outline color
`outline-offset-0` – `outline-offset-8`	`outline-offset`
`outline-offset-[3px]`	arbitrary

<!-- Accessible focus style -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Accessible Button
</button>

Ring (Focus Ring)

Box-shadow based focus ring — more flexible than outline.

Class	CSS
`ring-0`	`box-shadow: 0 0 0 0 ...`
`ring`	`box-shadow: 0 0 0 1px ...` in v4 (3px in v3)
`ring-1`	`box-shadow: 0 0 0 1px ...`
`ring-2`	`box-shadow: 0 0 0 2px ...`
`ring-3`	`box-shadow: 0 0 0 3px ...` (v4 — the old v3 bare `ring`)
`ring-4`	`box-shadow: 0 0 0 4px ...`
`ring-8`	`box-shadow: 0 0 0 8px ...`
`ring-inset`	inset ring
`ring-blue-500`	ring color
`ring-blue-500/50`	ring color with opacity
`ring-offset-0` – `ring-offset-8`	gap between ring and element
`ring-offset-white`	offset color (must match background)
`ring-[3px]`	arbitrary width

<!-- Standard focus ring pattern -->
<input class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">

<!-- Multi-ring effect -->
<button class="ring-2 ring-blue-500 ring-offset-2 ring-offset-white">...</button>

Box Shadow

v4 scale (v4 renamed the small end: v3 shadow-sm → v4 shadow-xs, v3 bare shadow → v4 shadow-sm):

Class (v4)	CSS
`shadow-none`	`box-shadow: none`
`shadow-2xs`	`box-shadow: 0 1px rgb(0 0 0 / 0.05)` (v4 only)
`shadow-xs`	`box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` (v3: `shadow-sm`)
`shadow-sm`	`box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), ...` (v3: `shadow`)
`shadow-md`	medium spread
`shadow-lg`	large spread
`shadow-xl`	extra large
`shadow-2xl`	larger still
`inset-shadow-sm`	inset shadow (v4; v3: `shadow-inner`)
`shadow-blue-500/25`	colored shadow
`shadow-[0_4px_20px_rgba(0,0,0,0.15)]`	arbitrary

<div class="shadow-sm rounded-xl border p-4">Card with subtle shadow</div>
<div class="shadow-xl rounded-2xl p-6">Modal-style elevated card</div>
<div class="shadow-lg shadow-blue-500/30 rounded-lg p-4">Colored shadow glow</div>

Drop Shadow (filter)

Applies to the element's alpha channel — works on transparent PNGs and SVGs. Same v4 rename as shadows: v3 drop-shadow-sm → v4 drop-shadow-xs, v3 bare drop-shadow → v4 drop-shadow-sm.

Class (v4)	CSS
`drop-shadow-xs`	`filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))` (v3: `drop-shadow-sm`)
`drop-shadow-sm`	standard (v3: `drop-shadow`)
`drop-shadow-md`	medium
`drop-shadow-lg`	large
`drop-shadow-xl`	extra large
`drop-shadow-2xl`	largest
`drop-shadow-none`	no shadow
`drop-shadow-[0_2px_10px_rgba(0,0,0,0.5)]`	arbitrary

<img class="drop-shadow-lg" src="logo-transparent.png" alt="">

Filters

Blur

v4 renamed the small end: v3 blur-sm → v4 blur-xs, v3 bare blur → v4 blur-sm.

Class (v4)	CSS
`blur-none`	`filter: blur(0)`
`blur-xs`	`filter: blur(4px)` (v3: `blur-sm`)
`blur-sm`	`filter: blur(8px)` (v3: `blur`)
`blur-md`	`filter: blur(12px)`
`blur-lg`	`filter: blur(16px)`
`blur-xl`	`filter: blur(24px)`
`blur-2xl`	`filter: blur(40px)`
`blur-3xl`	`filter: blur(64px)`
`blur-[2px]`	arbitrary

Brightness / Contrast / Grayscale / etc.

Class	CSS
`brightness-0` – `brightness-200`	`filter: brightness(N%)`
`contrast-0` – `contrast-200`	`filter: contrast(N%)`
`grayscale`	`filter: grayscale(100%)`
`grayscale-0`	`filter: grayscale(0)`
`invert`	`filter: invert(100%)`
`invert-0`	no invert
`saturate-0` – `saturate-200`	`filter: saturate(N%)`
`sepia`	`filter: sepia(100%)`
`sepia-0`	no sepia
`hue-rotate-0` – `hue-rotate-180`	`filter: hue-rotate(Ndeg)`
`hue-rotate-[270deg]`	arbitrary

<!-- Grayscale image that colorizes on hover -->
<img class="grayscale hover:grayscale-0 transition-all duration-300" src="photo.jpg" alt="">

<!-- Frosted glass overlay -->
<div class="absolute inset-0 bg-white/30 backdrop-blur-md"></div>

Backdrop Filter

Same filter utilities prefixed with backdrop-:

Class	CSS
`backdrop-blur-xs` – `backdrop-blur-3xl`	`backdrop-filter: blur(...)` (same v4 renames as `blur-*`)
`backdrop-brightness-50` – `backdrop-brightness-200`	brightness
`backdrop-contrast-*`	contrast
`backdrop-grayscale`	grayscale
`backdrop-hue-rotate-*`	hue rotate
`backdrop-invert`	invert
`backdrop-opacity-*`	opacity
`backdrop-saturate-*`	saturate
`backdrop-sepia`	sepia

<!-- Frosted glass card -->
<div class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-6 shadow-xl">
  Glass card
</div>

Transition and Animation

Transition Property

Class	CSS
`transition-none`	`transition-property: none`
`transition-all`	all properties
`transition`	colors, opacity, shadow, transform, filter
`transition-colors`	color, background, border, fill, stroke
`transition-opacity`	opacity
`transition-shadow`	box-shadow
`transition-transform`	transform

Duration

Class	CSS
`duration-0`	`0ms`
`duration-75`	`75ms`
`duration-100`	`100ms`
`duration-150`	`150ms`
`duration-200`	`200ms`
`duration-300`	`300ms`
`duration-500`	`500ms`
`duration-700`	`700ms`
`duration-1000`	`1000ms`
`duration-[400ms]`	arbitrary

Timing Function (Easing)

Class	CSS
`ease-linear`	`cubic-bezier(0, 0, 1, 1)`
`ease-in`	`cubic-bezier(0.4, 0, 1, 1)`
`ease-out`	`cubic-bezier(0, 0, 0.2, 1)`
`ease-in-out`	`cubic-bezier(0.4, 0, 0.2, 1)`
`ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]`	arbitrary

Delay

Class	CSS
`delay-0` – `delay-1000`	`transition-delay: Nms`
`delay-[200ms]`	arbitrary

<!-- Smooth hover transition -->
<button class="bg-blue-600 hover:bg-blue-700 text-white transition-colors duration-200 px-4 py-2 rounded-lg">
  Hover me
</button>

<!-- Image scale on hover -->
<div class="overflow-hidden rounded-xl">
  <img class="w-full h-48 object-cover hover:scale-105 transition-transform duration-300" src="photo.jpg" alt="">
</div>

Animation

Class	CSS
`animate-none`	`animation: none`
`animate-spin`	360deg rotation loop
`animate-ping`	scale + fade out loop (notification dot)
`animate-pulse`	opacity pulse loop (skeleton loader)
`animate-bounce`	up/down bounce loop
`animate-[wiggle_1s_ease-in-out_infinite]`	arbitrary

<!-- Loading spinner -->
<svg class="animate-spin size-6 text-blue-600" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0..."/>
</svg>

<!-- Notification badge ping -->
<span class="relative inline-flex">
  <span class="animate-ping absolute inline-flex size-full rounded-full bg-red-400 opacity-75"></span>
  <span class="relative size-3 rounded-full bg-red-500"></span>
</span>

<!-- Skeleton loader -->
<div class="animate-pulse">
  <div class="h-4 bg-slate-200 rounded w-3/4 mb-2"></div>
  <div class="h-4 bg-slate-200 rounded w-1/2"></div>
</div>

Transform

Scale

Class	CSS
`scale-0`	`scale: 0`
`scale-50`	`scale: .5`
`scale-75`	`scale: .75`
`scale-90`	`scale: .9`
`scale-95`	`scale: .95`
`scale-100`	`scale: 1`
`scale-105`	`scale: 1.05`
`scale-110`	`scale: 1.1`
`scale-125`	`scale: 1.25`
`scale-150`	`scale: 1.5`
`scale-x-90`	X-axis only
`scale-y-90`	Y-axis only
`scale-[1.03]`	arbitrary
`-scale-x-100`	flip horizontally

Rotate

Class	CSS
`rotate-0`	`rotate: 0deg`
`rotate-1`	`rotate: 1deg`
`rotate-2`	`rotate: 2deg`
`rotate-3`	`rotate: 3deg`
`rotate-6`	`rotate: 6deg`
`rotate-12`	`rotate: 12deg`
`rotate-45`	`rotate: 45deg`
`rotate-90`	`rotate: 90deg`
`rotate-180`	`rotate: 180deg`
`-rotate-45`	negative
`rotate-[17deg]`	arbitrary

Translate

Class	CSS
`translate-x-4`	`translate: 1rem 0`
`translate-y-4`	`translate: 0 1rem`
`translate-x-1/2`	50% of element width
`-translate-x-1/2`	-50% (used for centering)
`translate-x-full`	100% of width
`-translate-x-full`	-100% (slide out left)
`translate-x-[20px]`	arbitrary

<!-- Centering trick with absolute + translate -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
  Perfectly centered
</div>

<!-- Slide in from right (with transition) -->
<div class="translate-x-full transition-transform duration-300 data-[open=true]:translate-x-0">
  Drawer
</div>

Skew

Class	CSS
`skew-x-0` – `skew-x-12`	`skew(Ndeg, 0)`
`skew-y-0` – `skew-y-12`	`skew(0, Ndeg)`
`-skew-x-6`	negative
`skew-x-[15deg]`	arbitrary

Transform Origin

Class	CSS
`origin-center`	`transform-origin: center`
`origin-top`	`transform-origin: top`
`origin-top-right`	`transform-origin: top right`
`origin-right`	`transform-origin: right`
`origin-bottom-right`	`transform-origin: bottom right`
`origin-bottom`	`transform-origin: bottom`
`origin-bottom-left`	`transform-origin: bottom left`
`origin-left`	`transform-origin: left`
`origin-top-left`	`transform-origin: top left`
`origin-[33%_75%]`	arbitrary

Transform Style

Class	CSS
`transform-flat`	`transform-style: flat`
`transform-3d`	`transform-style: preserve-3d`

Perspective

Class	CSS
`perspective-none`	`perspective: none`
`perspective-dramatic`	`perspective: 100px`
`perspective-near`	`perspective: 300px`
`perspective-normal`	`perspective: 500px`
`perspective-midrange`	`perspective: 800px`
`perspective-far`	`perspective: 1200px`
`perspective-[500px]`	arbitrary