Shrnutí

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

• Tailwind CSS je CSS framework složený z utility tříd: malých tříd, z nichž každá dělá jednu věc, obvykle jednu deklaraci CSS. Místo psaní pravidel do souboru se styly dáváte prvkům třídy přímo v HTML, třeba <h1 class="text-center">.
• Tailwind se zapíná řádkem @import "tailwindcss"; v souboru style.css, který stránka připojí jako obvykle. Když kliknete na Spustit, Tailwind najde v HTML názvy tříd a napíše CSS přesně pro ty, které zná. Na vlastním počítači to za vás udělá program.
• Prvek může mít v jednom atributu class víc tříd oddělených mezerami, v libovolném pořadí. Jednu třídu můžete dát libovolnému počtu prvků.
• Preflight, základní styly Tailwindu, odstraní vestavěné styly prohlížeče: nadpisy i odkazy vypadají jako obyčejný text, nic nemá okraje a seznamy nemají odrážky. Celý vzhled stránky určují vaše třídy.
• Název třídy říká, co třída dělá, a většinou se skládá z CSS, které znáte. Třídy si můžete vyhledat na tailwindcss.com/docs.
• U třídy s překlepem se žádná chyba neobjeví, třída prostě nic nedělá. Chyba v souboru style.css se ukáže červeně pod náhledem a stránka pak od Tailwindu nedostane vůbec žádné CSS.

Třídy z této lekce:

V příští lekci, Barvy a text, poznáte barevnou paletu Tailwindu a naučíte se nastavovat velikost, tloušťku a další vlastnosti textu.

Procvičení: Na konec stránky jsme přidali box s otevírací dobou: prvek section s nadpisem h2 a odstavcem. Upravte jeho vzhled třídami z této lekce.