Vlastní barvy

V této lekci si Tailwind přizpůsobíte. Přidáte do něj vlastní barvy a písma a naučíte se, co dělat, když píšete pořád dokola stejný seznam tříd.

Budeme pracovat na domovské stránce útulku: má záhlaví, úvodní sekci s hlavním nadpisem a tlačítkem a karty koček. Stránka je nastylovaná třídami, které znáte z předchozích lekcí. Karty uvidíte vedle sebe, když náhled přepnete na 1280 px.

Hlavní barva útulku je oranžová a najdete ji po celé stránce: bg-orange-500 a hover:bg-orange-600 na pěti tlačítkách, text-orange-600 na hlavním nadpisu. (Oranžovou mají i pozadí úvodní sekce a odkaz Přispět, tam je ale barva zapsaná jako libovolná hodnota v hranatých závorkách. K nim se dostaneme později v této lekci.) Teď si představte, že útulek dostane nové logo v jiném odstínu oranžové, nebo třeba v zelené. Museli byste najít a změnit každou z těch tříd a snadno byste na některou zapomněli. Lepší je dát barvě jméno, například brand (anglicky značka; barva značky je barva, podle které lidé poznají firmu nebo organizaci), a na jednom místě určit, jaká ta barva je.

Barvy nejsou v Tailwindu napevno. Pocházejí z jeho motivu (anglicky theme): ze seznamu hodnot, ze kterých Tailwind vytváří třídy (barvy, písma, krok mezer, breakpointy a další). Každá hodnota v motivu je proměnná CSS: jméno, které začíná dvěma pomlčkami, s hodnotou, kterou pak CSS může použít jinde. Takhle je v motivu definovaná například barva orange-500:

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

(Zápis oklch znáte z lekce Barvy a text.) Tailwind si přečte jméno proměnné: --color- říká, že jde o barvu, a zbytek, orange-500, se stane koncem tříd bg-orange-500, text-orange-500, border-orange-500 a všech dalších tříd, které berou barvu.

Vlastní hodnoty přidáte do motivu v souboru style.css, v bloku @theme za @import "tailwindcss";:

@import "tailwindcss";

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

Barvy můžete zapsat v jakémkoli formátu, který znáte: hex, rgb nebo hsl. Tailwind teď má dvě nové barvy, brand-500 a brand-600, a fungují s nimi všechny barevné třídy: bg-brand-500, text-brand-600, border-brand-500, hover:bg-brand-600, dokonce i s průhledností, jako v bg-brand-500/50. Třída bg-brand-500 vytvoří toto CSS:

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

var(--color-brand-500) zastupuje hodnotu proměnné. Když tedy hodnotu v @theme změníte, změní se s ní všechny třídy s brand-500 na celé stránce.

Jméno brand i čísla jsou na vás. My používáme 500 a 600 jako v paletě Tailwindu: hned je vidět, který odstín je tmavší, a zbývá místo pro světlejší i tmavší odstíny, kdybychom je později potřebovali.