Tailwind CSS Cheatsheet

Borders, Shadows, Effects

Use this Tailwind CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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