Zapnutí Tailwindu

Prohlížeče rozumějí jen CSS. O Tailwindu nikdy neslyšely. Kde se tedy vezme CSS pro třídu text-center? Tailwind je zároveň program, který CSS píše za vás, a zapíná ho řádek v souboru style.css:

@import "tailwindcss";

Pravidlo @import vloží do vašeho souboru se styly jiný soubor se styly, tady ten od Tailwindu. Stránka připojuje style.css prvkem link v head, stejně jako v kurzu CSS. Když kliknete na Spustit, náš web udělá tohle:

1. Tailwind projde index.html a posbírá všechna slova, která by mohla být názvy tříd.
2. Pro každé slovo, které je jednou z jeho tříd, třeba text-center, napíše pravidlo CSS. Všechna ostatní slova přeskočí.
3. CSS, které napsal, nahradí řádek s @import a stránka ho dostane přes soubor style.css.

Prohlížeč tak dostane soubor se styly, ve kterém je CSS přesně pro ty třídy, které vaše stránka používá, a nic navíc. Proto sám od sebe neroste: když třídu z HTML smažete, při dalším spuštění zmizí i její CSS.

Na vašem vlastním počítači tuhle práci dělá program. Jak ho nastavit, uvidíte v závěrečném projektu. Tady to za vás udělá náš web.

Soubor style.css jsme vyprázdnili, takže Tailwind je teď vypnutý. Nadpis má pořád třídu text-center, a přesto je vlevo: CSS pro tuto třídu nikdo nenapsal a třída bez CSS nic nedělá. Všimněte si také, jak jinak stránka vypadá: nadpis je velký a tučný, seznam má odrážky a odkaz je modrý a podtržený. To jsou vestavěné styly prohlížeče. Sledujte, co se s nimi stane, až Tailwind zapnete.