Tailwind CSS Course
Tailwind CSS
/
Beginner

Custom Colors

Definition

Defining brand-specific color palettes within Tailwind's configuration file.

Explain Like I'm New

Giving names to HEX codes. Instead of remembering `#FF5733`, you name it `primary`. Tailwind then does the magic of creating all the background, text, border, and ring classes for it.

Real World Example

Creating semantic color names like `success`, `warning`, and `danger` instead of using `green`, `yellow`, and `red`.

Common Use Cases

  • •Theming
  • •Semantic design

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • If you add a color called `primary: '#123456'` to your config, what class do you use to make text that color?

intermediate

  • How do you define CSS Variables (like `var(--color-primary)`) inside `tailwind.config.js`?

Flash Cards

Question

What class?

Click to reveal answer
Answer

`text-primary`

Question

CSS Variables?

Click to reveal answer
Answer

You just write the CSS variable exactly as a string: `primary: 'var(--color-primary)'`. This is incredibly powerful for letting users change themes dynamically at runtime.