Shrnutí

V této lekci jste se naučili, že:

• Barvy, písma a další hodnoty Tailwindu pocházejí z jeho motivu. Každá hodnota je proměnná CSS, například --color-orange-500. Vlastní hodnoty přidáte v bloku @theme za @import "tailwindcss";.
• Proměnná, jejíž jméno začíná na --color-, vytvoří barvu pro všechny barevné třídy: z --color-brand-500 vzniknou bg-brand-500, text-brand-500, border-brand-500, hover:bg-brand-500 a další. Když změníte její hodnotu, změní se barva všude, kde je použitá.
• Proměnná, jejíž jméno začíná na --font-, vytvoří třídu pro písmo: z --font-display: "Baloo 2", sans-serif; vznikne font-display. Vlastní hodnotou --font-sans změníte písmo celé stránky.
• Webové písmo můžete načíst v souboru se styly pomocí @import url(...). Musí být na začátku, před @import "tailwindcss";: @import za jinými pravidly prohlížeč bez chyby přeskočí.
• Když se seznam tříd opakuje, napište prvek jen jednou v šabloně nebo komponentě, nebo upravte všechna místa najednou (Ctrl+D). Jinak si vytvořte vlastní třídu: pravidlo s @apply v bloku @layer components.
• Utility třídy vyhrávají nad vrstvou components, takže jimi můžete vlastní třídu upravit: tlacitko px-8.
• Neznámá třída v @apply zastaví celý style.css a pod náhledem se červeně objeví chyba.
• @utility vytvoří opravdovou utility třídu, která funguje s variantami, například md:bg-pruhy. Třída z @layer components s nimi nefunguje.
• Libovolné hodnoty jsou na jednorázové výjimky. Hodnota, která se opakuje, patří do motivu.

V příští lekci, Závěrečný projekt, sami nastylujete celou domovskou stránku útulku se vším, co jste se v tomto kurzu naučili.

Procvičení. Oskar je v útulku nový. Do jeho karty jsme přidali štítek Nový (prvek span na začátku karty) a karta teď má třídu relative, aby šlo štítek umístit na obrázek. Udělejte pro štítek vlastní třídu v druhé barvě útulku: zelené pro štítky.