Hack University
← All cheatsheets
Tailwind CSS
Colors and Backgrounds

Tailwind CSS Cheatsheet

Colors and Backgrounds

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

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

ColorShades available
slate50 100 200 300 400 500 600 700 800 900 950
gray50 100 200 300 400 500 600 700 800 900 950
zinc50 100 200 300 400 500 600 700 800 900 950
neutral50 100 200 300 400 500 600 700 800 900 950
stone50 100 200 300 400 500 600 700 800 900 950
red50 100 200 300 400 500 600 700 800 900 950
orange50 100 200 300 400 500 600 700 800 900 950
amber50 100 200 300 400 500 600 700 800 900 950
yellow50 100 200 300 400 500 600 700 800 900 950
lime50 100 200 300 400 500 600 700 800 900 950
green50 100 200 300 400 500 600 700 800 900 950
emerald50 100 200 300 400 500 600 700 800 900 950
teal50 100 200 300 400 500 600 700 800 900 950
cyan50 100 200 300 400 500 600 700 800 900 950
sky50 100 200 300 400 500 600 700 800 900 950
blue50 100 200 300 400 500 600 700 800 900 950
indigo50 100 200 300 400 500 600 700 800 900 950
violet50 100 200 300 400 500 600 700 800 900 950
purple50 100 200 300 400 500 600 700 800 900 950
fuchsia50 100 200 300 400 500 600 700 800 900 950
pink50 100 200 300 400 500 600 700 800 900 950
rose50 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

ClassCSS
bg-gradient-to-tbackground-image: linear-gradient(to top, ...)
bg-gradient-to-trto top right
bg-gradient-to-rto right
bg-gradient-to-brto bottom right
bg-gradient-to-bto bottom
bg-gradient-to-blto bottom left
bg-gradient-to-lto left
bg-gradient-to-tlto top left

Gradient Color Stops

ClassRole
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

ClassCSS
bg-autobackground-size: auto
bg-coverbackground-size: cover
bg-containbackground-size: contain
bg-[50%]arbitrary

Background Position

ClassCSS
bg-centerbackground-position: center
bg-topbackground-position: top
bg-bottombackground-position: bottom
bg-leftbackground-position: left
bg-rightbackground-position: right
bg-left-topbackground-position: left top
bg-right-bottombackground-position: right bottom
bg-[25%_75%]arbitrary

Background Repeat

ClassCSS
bg-repeatbackground-repeat: repeat
bg-no-repeatbackground-repeat: no-repeat
bg-repeat-xbackground-repeat: repeat-x
bg-repeat-ybackground-repeat: repeat-y
bg-repeat-roundbackground-repeat: round
bg-repeat-spacebackground-repeat: space

Background Attachment

ClassCSS
bg-fixedbackground-attachment: fixed
bg-localbackground-attachment: local
bg-scrollbackground-attachment: scroll
<!-- Parallax hero background -->
<div class="bg-fixed bg-cover bg-center bg-[url('/hero.jpg')] h-screen">
</div>

Background Origin and Clip

ClassCSS
bg-origin-borderbackground-origin: border-box
bg-origin-paddingbackground-origin: padding-box
bg-origin-contentbackground-origin: content-box
bg-clip-borderbackground-clip: border-box
bg-clip-paddingbackground-clip: padding-box
bg-clip-contentbackground-clip: content-box
bg-clip-textbackground-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)

ClassCSS
fill-currentfill: currentColor
fill-blue-500fill: #3b82f6
fill-nonefill: none
fill-[#ff6b35]arbitrary
stroke-currentstroke: currentColor
stroke-blue-500stroke: #3b82f6
stroke-0 – stroke-2stroke-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.

ClassCSS
opacity-0opacity: 0
opacity-5opacity: 0.05
opacity-10opacity: 0.1
opacity-25opacity: 0.25
opacity-50opacity: 0.5
opacity-75opacity: 0.75
opacity-90opacity: 0.9
opacity-95opacity: 0.95
opacity-100opacity: 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

ClassCSS
mix-blend-normalmix-blend-mode: normal
mix-blend-multiplymix-blend-mode: multiply
mix-blend-screenmix-blend-mode: screen
mix-blend-overlaymix-blend-mode: overlay
mix-blend-darkenmix-blend-mode: darken
mix-blend-lightenmix-blend-mode: lighten
mix-blend-color-dodgemix-blend-mode: color-dodge
mix-blend-color-burnmix-blend-mode: color-burn
mix-blend-hard-lightmix-blend-mode: hard-light
mix-blend-soft-lightmix-blend-mode: soft-light
mix-blend-differencemix-blend-mode: difference
mix-blend-exclusionmix-blend-mode: exclusion
mix-blend-huemix-blend-mode: hue
mix-blend-saturationmix-blend-mode: saturation
mix-blend-colormix-blend-mode: color
mix-blend-luminositymix-blend-mode: luminosity
mix-blend-plus-lightermix-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>
ClassCSS
accent-autoaccent-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">
ClassCSS
caret-{color}caret-color: {color}
caret-autocaret-color: auto