Lekce 1.4

Tailwind CSS: utility-first přístup

Vzhled skládaný z hotových tříd přímo na prvku v HTML.

Bonus: Motiv

Tahle kapitola je navíc pro ty, kdo mají hotová cvičení a chtějí jít dál. Zbytek lekce ji nepotřebuje.

Barvy palety, velikosti písma i škála odsazení, se kterými jsme v lekci pracovali, pocházejí z výchozího motivu (theme). Motiv je sada hodnot, ze kterých Tailwind vyrábí utility, a dá se rozšířit o vlastní. Nastavuje se v bloku @theme a zapisuje se do něj to, co už známe z minulé lekce – vlastní vlastnosti. S Play CDN patří do značky <style> s typem text/tailwindcss, aby ji skript zpracoval:

index.html

<style type="text/tailwindcss">
  @theme {
    --color-brand: #5b2cf0;
    --color-danger: #ff5c39;
    --font-display: "Bricolage Grotesque", sans-serif;
  }
</style>

Tailwind z každé takové hodnoty vyrobí utility. Z --color-brand vzniknou najednou bg-brand, text-brand, border-brand a další – nemusíme je nikde vyjmenovávat.

Poznámka

Ve starších projektech se nastavení píše do souboru tailwind.config.js a stylopis začíná trojicí direktiv @tailwind. Je to zápis předchozí velké verze, potkáte ho v kdejakém návodu a znamená totéž co dnešní @theme.

Motiv jsou pořád tokeny

Za všemi utilitami stojí hodnoty z bloku @theme, a to jsou vlastní vlastnosti z minulé lekce. Tailwind tedy tokeny nenahrazuje, jen k nim přidává hotové třídy a pojmenovanou škálu. Kdo si v minulém bloku poctivě rozmyslel, jaké má web barvy a mezery, má motiv hotový za deset minut.

Vyzkoušejte si

Přidejte do motivu vlastní barvu --color-brand a přepněte na ni pozadí tlačítka z prvního cvičení.