Tailwind CSS Cheatsheet

Colors and Backgrounds

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.

The Color Palette

Tailwind includes a curated 22-color palette with 11 shades (50–950) each.

In v4 the palette is defined in oklch() for wider-gamut displays; v3 used hex (e.g. blue-500 was #3b82f6). Class names are unchanged.

Full Palette Reference

Color	Shades available
`slate`	50 100 200 300 400 500 600 700 800 900 950
`gray`	50 100 200 300 400 500 600 700 800 900 950
`zinc`	50 100 200 300 400 500 600 700 800 900 950
`neutral`	50 100 200 300 400 500 600 700 800 900 950
`stone`	50 100 200 300 400 500 600 700 800 900 950
`red`	50 100 200 300 400 500 600 700 800 900 950
`orange`	50 100 200 300 400 500 600 700 800 900 950
`amber`	50 100 200 300 400 500 600 700 800 900 950
`yellow`	50 100 200 300 400 500 600 700 800 900 950
`lime`	50 100 200 300 400 500 600 700 800 900 950
`green`	50 100 200 300 400 500 600 700 800 900 950
`emerald`	50 100 200 300 400 500 600 700 800 900 950
`teal`	50 100 200 300 400 500 600 700 800 900 950
`cyan`	50 100 200 300 400 500 600 700 800 900 950
`sky`	50 100 200 300 400 500 600 700 800 900 950
`blue`	50 100 200 300 400 500 600 700 800 900 950
`indigo`	50 100 200 300 400 500 600 700 800 900 950
`violet`	50 100 200 300 400 500 600 700 800 900 950
`purple`	50 100 200 300 400 500 600 700 800 900 950
`fuchsia`	50 100 200 300 400 500 600 700 800 900 950
`pink`	50 100 200 300 400 500 600 700 800 900 950
`rose`	50 100 200 300 400 500 600 700 800 900 950

Special single-value colors: black, white, transparent, current, inherit.

Text Color

<p class="text-slate-900">Dark body text</p>
<p class="text-slate-500">Muted / secondary text</p>
<p class="text-blue-600">Primary accent</p>
<p class="text-red-500">Error / danger</p>
<p class="text-emerald-600">Success</p>
<p class="text-amber-500">Warning</p>
<p class="text-white">On dark background</p>
<p class="text-transparent">Invisible (for gradients)</p>
<p class="text-current">Inherits color from parent</p>
<p class="text-[#ff6b35]">Arbitrary hex</p>
<p class="text-white/75">75% opacity white</p>

Background Color

<div class="bg-white">White</div>
<div class="bg-slate-50">Very light gray</div>
<div class="bg-slate-900">Dark background</div>
<div class="bg-blue-600">Solid accent</div>
<div class="bg-transparent">No background</div>
<div class="bg-current">Matches text color</div>
<div class="bg-[#1a1a2e]">Arbitrary hex</div>
<div class="bg-blue-500/50">50% opacity blue</div>
<div class="bg-blue-500/[0.35]">35% opacity (arbitrary)</div>

Background Opacity (legacy / modifier syntax)

In v3+, opacity is applied via the / modifier directly on the color:

<!-- Modern (v3+) -->
<div class="bg-black/25">25% black overlay</div>

<!-- Legacy (still works but verbose) -->
<div class="bg-black bg-opacity-25">25% black overlay</div>

Background Image and Gradient

Gradient Direction

Class	CSS
`bg-gradient-to-t`	`background-image: linear-gradient(to top, ...)`
`bg-gradient-to-tr`	to top right
`bg-gradient-to-r`	to right
`bg-gradient-to-br`	to bottom right
`bg-gradient-to-b`	to bottom
`bg-gradient-to-bl`	to bottom left
`bg-gradient-to-l`	to left
`bg-gradient-to-tl`	to top left

Gradient Color Stops

Class	Role
`from-{color}`	Start color
`via-{color}`	Middle color (optional)
`to-{color}`	End color
`from-{n}%`	Custom start position
`via-{n}%`	Custom via position
`to-{n}%`	Custom end position

<!-- Simple two-stop gradient -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6">
  Gradient background
</div>

<!-- Three-stop with midpoint -->
<div class="bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-600 h-32">
</div>

<!-- Gradient with opacity -->
<div class="bg-gradient-to-b from-black/60 to-transparent h-24">
</div>

<!-- Custom stop positions -->
<div class="bg-gradient-to-r from-blue-600 from-30% via-sky-400 via-60% to-emerald-500">
</div>

Radial and Conic Gradients (v4)

<div class="bg-[radial-gradient(ellipse_at_center,_#fff_0%,_#3b82f6_100%)]">
</div>
<div class="bg-[conic-gradient(from_0deg,_red,_yellow,_green,_red)]">
</div>

Background Image (arbitrary)

<div class="bg-[url('/hero.jpg')]">...</div>
<div class="bg-[image:var(--hero-img)]">...</div>

Background Size

Class	CSS
`bg-auto`	`background-size: auto`
`bg-cover`	`background-size: cover`
`bg-contain`	`background-size: contain`
`bg-[50%]`	arbitrary

Background Position

Class	CSS
`bg-center`	`background-position: center`
`bg-top`	`background-position: top`
`bg-bottom`	`background-position: bottom`
`bg-left`	`background-position: left`
`bg-right`	`background-position: right`
`bg-left-top`	`background-position: left top`
`bg-right-bottom`	`background-position: right bottom`
`bg-[25%_75%]`	arbitrary

Background Repeat

Class	CSS
`bg-repeat`	`background-repeat: repeat`
`bg-no-repeat`	`background-repeat: no-repeat`
`bg-repeat-x`	`background-repeat: repeat-x`
`bg-repeat-y`	`background-repeat: repeat-y`
`bg-repeat-round`	`background-repeat: round`
`bg-repeat-space`	`background-repeat: space`

Background Attachment

Class	CSS
`bg-fixed`	`background-attachment: fixed`
`bg-local`	`background-attachment: local`
`bg-scroll`	`background-attachment: scroll`

<!-- Parallax hero background -->
<div class="bg-fixed bg-cover bg-center bg-[url('/hero.jpg')] h-screen">
</div>

Background Origin and Clip

Class	CSS
`bg-origin-border`	`background-origin: border-box`
`bg-origin-padding`	`background-origin: padding-box`
`bg-origin-content`	`background-origin: content-box`
`bg-clip-border`	`background-clip: border-box`
`bg-clip-padding`	`background-clip: padding-box`
`bg-clip-content`	`background-clip: content-box`
`bg-clip-text`	`background-clip: text`

<!-- Gradient text effect -->
<h1 class="bg-gradient-to-r from-pink-500 to-violet-600 bg-clip-text text-transparent font-bold text-5xl">
  Gradient Text
</h1>

Fill and Stroke (SVG)

Class	CSS
`fill-current`	`fill: currentColor`
`fill-blue-500`	`fill: #3b82f6`
`fill-none`	`fill: none`
`fill-[#ff6b35]`	arbitrary
`stroke-current`	`stroke: currentColor`
`stroke-blue-500`	`stroke: #3b82f6`
`stroke-0` – `stroke-2`	`stroke-width: 0` – `2`
`stroke-[1.5px]`	arbitrary stroke width

<svg class="w-6 h-6 fill-none stroke-current stroke-2 text-blue-600" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
</svg>

Opacity

Applies to the entire element including children.

Class	CSS
`opacity-0`	`opacity: 0`
`opacity-5`	`opacity: 0.05`
`opacity-10`	`opacity: 0.1`
`opacity-25`	`opacity: 0.25`
`opacity-50`	`opacity: 0.5`
`opacity-75`	`opacity: 0.75`
`opacity-90`	`opacity: 0.9`
`opacity-95`	`opacity: 0.95`
`opacity-100`	`opacity: 1`
`opacity-[0.35]`	arbitrary

<button class="bg-blue-600 text-white opacity-50 cursor-not-allowed" disabled>
  Disabled
</button>

Mixing and Blending

Mix Blend Mode

Class	CSS
`mix-blend-normal`	`mix-blend-mode: normal`
`mix-blend-multiply`	`mix-blend-mode: multiply`
`mix-blend-screen`	`mix-blend-mode: screen`
`mix-blend-overlay`	`mix-blend-mode: overlay`
`mix-blend-darken`	`mix-blend-mode: darken`
`mix-blend-lighten`	`mix-blend-mode: lighten`
`mix-blend-color-dodge`	`mix-blend-mode: color-dodge`
`mix-blend-color-burn`	`mix-blend-mode: color-burn`
`mix-blend-hard-light`	`mix-blend-mode: hard-light`
`mix-blend-soft-light`	`mix-blend-mode: soft-light`
`mix-blend-difference`	`mix-blend-mode: difference`
`mix-blend-exclusion`	`mix-blend-mode: exclusion`
`mix-blend-hue`	`mix-blend-mode: hue`
`mix-blend-saturation`	`mix-blend-mode: saturation`
`mix-blend-color`	`mix-blend-mode: color`
`mix-blend-luminosity`	`mix-blend-mode: luminosity`
`mix-blend-plus-lighter`	`mix-blend-mode: plus-lighter`

Background Blend Mode

Same values, applied to background-blend-mode — use bg-blend-{mode}.

<!-- Multiply blend for logos on colored backgrounds -->
<img class="mix-blend-multiply" src="logo-black.png" alt="Logo">

Accent Color

Colors native form controls (<input type="checkbox">, <input type="radio">, <progress>):

<input type="checkbox" class="accent-blue-600">
<input type="range" class="accent-pink-500">
<progress class="accent-emerald-500" value="70" max="100"></progress>

Class	CSS
`accent-auto`	`accent-color: auto`
`accent-{color}-{shade}`	`accent-color: {hex}`
`accent-[#ff6b35]`	arbitrary

Caret Color

Color of the text insertion cursor.

<input class="caret-blue-600 border rounded px-3 py-2" type="text">

Class	CSS
`caret-{color}`	`caret-color: {color}`
`caret-auto`	`caret-color: auto`