Question 1

How many colors are in Tailwind CSS?

Accepted Answer

Tailwind CSS includes 242 colors total - 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) each with 11 shades from 50 (lightest) to 950 (darkest).

Question 2

What color format does Tailwind v4 use?

Accepted Answer

Tailwind CSS v4 uses OKLCH (Oklab Lightness Chroma Hue) color format by default, which provides more perceptually uniform colors and better wide gamut support compared to traditional hex or RGB values.

Question 3

How do I use Tailwind colors in my project?

Accepted Answer

Use Tailwind color classes with utilities like bg-{color}-{shade} for backgrounds, text-{color}-{shade} for text, and border-{color}-{shade} for borders. For example: bg-indigo-500, text-slate-900, border-rose-300.

Question 4

Can I copy Tailwind color hex codes?

Accepted Answer

Yes! Simply click on any color swatch to copy its hex code, or hover to see additional copy options for bg-, text-, and border- class names.