Tailwind provides us with those classes we can use to match the corresponding color:

_	_	_
slate	gray	zinc
neutral	stone	red
orange	amber	yellow
lime	green	emerald
teal	cyan	sky
blue	indigo	violet
purple	fuchsia	pink
rose

Every color has various levels:

_	_	_
50	100	200
300	400	500
600	700	800
900	950

You go from lower value to higher to make the color go from less intense to more intense:

• fuchsia-50
• fuchsia-100
• fuchsia-200
• fuchsia-300
• fuchsia-400
• fuchsia-500
• fuchsia-600
• fuchsia-700
• fuchsia-800
• fuchsia-900
• fuchsia-950

We also have transparent, black and white, which do not have levels.

To apply a color to text, prepend text- to any color.

To apply a background color, prepend bg- to any color.

We’ve seen how to color text using text-black. Black and white (text-white) are kind of unique because they have this “only” color.

Other colors have shades, going from 50 to 950: text-red-500 for example applies the color using the color CSS property, setting it to a red value with an intensity of 500 (try text-red-200 or text-red-800 too).

The other color you’ll use is the background color. You use bg-black, bg-green-600, and so on.

You can also apply custom colors using the syntax bg-[#00FFCC].

Link to docs

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	▶︎ Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind