Color and surface utilities

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Color and surface utilities—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Color and surface utilities in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Color and surface utilities in your own words.

Tailwind ships a default palette: slate, indigo, emerald, each with steps 50–950. Utilities cover text (text-indigo-600), background (bg-slate-50), border (border-slate-200), and rings.

Token thinking

Prefer scale steps over arbitrary hex in markup. Designers map brand primary to indigo-600; developers stay consistent. Custom brand colors belong in theme.extend.colors (covered later).

Contrast and accessibility

Pair light backgrounds with darker text steps (bg-indigo-50 + text-indigo-900). Check contrast ratios—utilities make color easy to apply but do not guarantee WCAG compliance.

Important interview questions and answers

Q: How do you add a brand color?
A: Extend the theme in tailwind.config.js so utilities like bg-brand are generated and purge-safe.
Q: text-white on bg-indigo-400—always safe?
A: Not always. Verify contrast; prefer darker bg steps or larger text for small labels.

Self-check

What is the difference between bg-slate-100 and text-slate-100?
Where should one-off hex values live in a Tailwind project?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Did you check contrast on your color pairs?
How would you add a brand color properly?

No discussion yet. Be the first to ask a question.