Your Own Colors

In this lesson, you'll make Tailwind your own. You'll add your own colors and fonts to it, and you'll learn what to do when you write the same list of classes again and again.

We'll work on the shelter's home page: a header, the hero (the welcome section at the top, with the headline and a button) and the cats' cards. It's styled with classes you know from earlier lessons. To see the cards side by side, switch the preview to 1280 px.

The shelter's main color is orange, and you'll find it all over the page: bg-orange-500 and hover:bg-orange-600 on five buttons, text-orange-600 on the headline. (The hero's background and the Donate link are orange too, but there the colors are written as arbitrary values in square brackets. We'll get to them later in this lesson.) Now imagine the shelter gets a new logo in a different orange, or in green. You'd have to find and change every one of these classes, and it would be easy to miss one. It's better to give the color a name, for example brand (a brand color is the color people know a company or an organization by), and to say what color it is in one place.

Tailwind's colors aren't fixed. They come from its theme: the list of values that Tailwind makes classes from (colors, fonts, the spacing step, breakpoints and more). Each value in the theme is a CSS variable: a name starting with two dashes, with a value that CSS can then use elsewhere. For example, this is how the theme defines orange-500:

--color-orange-500: oklch(70.5% 0.213 47.604);

(You know oklch from the lesson Colors and Text.) Tailwind reads the name of the variable: --color- says that it's a color, and the rest, orange-500, becomes the end of the classes bg-orange-500, text-orange-500, border-orange-500 and every other class that takes a color.

You add your own values to the theme in style.css, in an @theme block after @import "tailwindcss";:

@import "tailwindcss";

@theme {
	--color-brand-500: #f97316;
	--color-brand-600: #ea580c;
}

You can write the colors in any format you know: hex, rgb or hsl. Now Tailwind has two new colors, brand-500 and brand-600, and all the color classes work with them: bg-brand-500, text-brand-600, border-brand-500, hover:bg-brand-600, even with an opacity, as in bg-brand-500/50. The class bg-brand-500 makes this CSS:

.bg-brand-500 {
	background-color: var(--color-brand-500);
}

var(--color-brand-500) stands for the value of the variable. So when you change the value in @theme, all the classes with brand-500 change with it, all over the page.

The name brand and the numbers are up to you. We use 500 and 600 as in Tailwind's palette: you can tell at once which shade is darker, and there's room for lighter and darker shades later.