Co je Tailwind?

Vítejte v kurzu Tailwind CSS! V kurzu CSS jste stránkám dávali vzhled tak, že jste psali pravidla do souboru se styly. Tailwind CSS, zkráceně Tailwind, nabízí jiný způsob, jak psát totéž CSS, a dnes patří k nejoblíbenějším nástrojům pro stylování webů.

Když jste v kurzu CSS chtěli zarovnat nadpis na střed, napsali jste do souboru style.css pravidlo:

h1 {
	text-align: center;
}

S Tailwindem pravidlo nepíšete. Místo toho dáte prvku hotovou třídu, a to rovnou v HTML:

<h1 class="text-center">Kočičí útulek Fousek</h1>

Třída text-center zastupuje přesně jednu deklaraci: text-align: center (zarovnání textu na střed). Takovým třídám se říká utility třídy (anglicky utility classes, pomocné třídy): každá má jediný malý úkol, obvykle jednu deklaraci CSS. Tailwind jich má tisíce, skoro pro každou vlastnost a hodnotu CSS, kterou znáte, a prvek stylujete tak, že mu dáte třídy, které potřebuje. Tailwind je tedy CSS framework: hotová sada stylů, ze které stránky skládáte.

Proč by někdo psal CSS takhle?

• Zůstanete v jednom souboru. Jak prvek vypadá, vidíte přímo u něj v HTML. Nemusíte přepínat do souboru se styly a hledat jeho pravidlo.
• Nemusíte vymýšlet názvy tříd. Už žádné lámání hlavy nad názvy jako nadpis-pozadi nebo karta pro každý prvek, kterému chcete dát vzhled.
• Soubor se styly neroste donekonečna. V kurzu CSS znamenala každá nová část stránky nová pravidla a stará pravidla v souboru se styly pro jistotu zůstávala, i když je už nic nepoužívalo. Když s Tailwindem prvek smažete, zmizí spolu s ním i jeho styly.

Má to ale i svou cenu: HTML se prodlouží. Prvek mívá klidně pět nebo deset tříd a zpočátku vám to může připadat nepřehledné. Většina lidí si rychle zvykne a později v kurzu se naučíte, jak si poradit se třídami, které často opakujete.

Tailwind je pořád CSS: každá třída zastupuje deklarace CSS, které znáte z kurzu CSS. Všechno, co jste se tam naučili, proto platí dál, od box modelu po flexbox a mřížku. Jen to budete psát jinak.

V tomto kurzu vytvoříte web kočičího útulku Fousek. V editoru najdete jeho úplně první domovskou stránku: obyčejné HTML, jak ho znáte z kurzu HTML. Tailwind už je zapnutý: v souboru style.css je jediný řádek, se kterým se seznámíte v dalším cvičení. Nedivte se, že nadpis vypadá jako obyčejný text: Tailwind to dělá schválně. Proč, to zjistíte později v této lekci.

Nad náhledem je nová lišta Šířka náhledu. Umí stránku ukázat tak širokou, jako je obrazovka telefonu, tabletu nebo počítače. Hlavně ji budete potřebovat v lekci o responzivním designu. Pokud vás cvičení nepožádá o jinou šířku, nechte vybranou možnost Podle okna.