Barevná paleta

V této lekci dáte stránce barvy a postaráte se o její text: o jeho velikost, tloušťku, výšku řádku, zarovnání, mezery mezi písmeny a písmo. Všechno to znáte z kurzu CSS, teď to ale uděláte třídami Tailwindu.

Budeme pracovat na Mourkově stránce na webu našeho útulku. Mourek je dvouletý mourovatý kocour, který hledá nový domov. Podívejte se na kód: nadpis už má z minulé lekce třídy text-3xl a font-bold a odkaz je podtržený (underline). Na stránce je i pár tříd, které ještě neznáte: mx-auto max-w-xl p-8 u prvku main a mt-3, mt-4 a podobné u některých odstavců. Přidávají volné místo kolem částí stránky a mezi ně, aby se text nedotýkal krajů náhledu. Naučíte se je v příští lekci; zatím je nechte, jak jsou.

V kurzu CSS jste barvu textu nastavovali vlastností color v pravidle v souboru style.css. S Tailwindem dáte prvku třídu:

<h1 class="text-orange-600">Mourek</h1>

Název třídy má tři části: text říká, co dostane barvu (text), orange (oranžová) je barva a 600 je její odstín. Tailwind pro ni vytvoří toto pravidlo:

.text-orange-600 {
	color: oklch(64.6% 0.222 41.116);
}

(Přesné CSS od Tailwindu vypadá trochu jinak, barva je ale stejná.) oklch je další způsob zápisu barvy. Funguje podobně jako HSL z kurzu CSS: první číslo je světlost (64,6 %), druhé říká, jak sytá barva je, a třetí je její místo na barevném kole ve stupních (41°, oranžová). Sami ho psát nemusíte: v Tailwindu vybíráte barvy podle názvu.

Tailwind nenabízí všech 16 milionů barev. Má barevnou paletu: sadu barev, které designéři vybrali tak, aby k sobě ladily. Je v ní 26 barev: 17 pestrých a 9 šedých, každá šedá s trochu jiným nádechem:

red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

slate gray zinc neutral stone taupe mauve mist olive

Názvy jsou anglické: například red je červená, emerald smaragdová a stone kamenná (teplá šedá).

Každá barva má 11 odstínů očíslovaných od 50 (nejsvětlejší) přes 100, 200 a tak dál až po 900 a 950 (nejtmavší). Takhle vypadají odstíny oranžové:

50 100 200 300 400 500 600 700 800 900 950

Kromě toho jsou tu barvy black (černá) a white (bílá), které odstíny nemají: text-black, text-white.

Proč paleta, když CSS umí jakoukoli barvu? Protože se z ní snáz vybírá: místo hledání správného kódu barvy vezmete název a číslo a barvy z jedné palety se k sobě hodí. A když v HTML uvidíte text-orange-600, hned víte, o jakou barvu jde. Později v kurzu uvidíte, jak použít i vlastní barvy.

Pozor na překlepy a vymyšlené názvy: třídy text-orange (bez odstínu) a text-orange-650 neexistují, takže nic neudělají a žádnou chybu neuvidíte. Jak už víte, Tailwind vytváří CSS jen pro třídy, které zná.