HTML & CSS · Middle · Question 43 of 75

How do you add a custom `brand` color in Tailwind v4 so that `bg-brand`, `text-brand`, etc. work?

✓Correct answer: Declare --color-brand inside @theme in CSS
2Create a .bg-brand class in a separate CSS file
3Pass the color via a data-brand attribute on <html>

Explanation

In v4 configuration moved into CSS: variables in @theme { --color-brand: oklch(...); } create both the utilities (bg-brand, border-brand) and a regular CSS variable var(--color-brand). The old tailwind.config.js is supported via @config but isn't needed by default.

How do you add a custom `brand` color in Tailwind v4 so that `bg-brand`, `text-brand`, etc. work?

Explanation

Further reading

Problem with a question

Test yourself

How do you add a custom brand color in Tailwind v4 so that bg-brand, text-brand, etc. work?

Explanation

Further reading

Test yourself

How do you add a custom `brand` color in Tailwind v4 so that `bg-brand`, `text-brand`, etc. work?