Lekce 1.4

Tailwind CSS: utility-first přístup

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

Rozložení stránky

Tailwind má pochopitelně utility třídy i pro všechny vlastnosti pro nastavení flexboxu a gridu.

Flexbox

Dokumentace

V dokumentaci: display, flex-direction, justify-content, align-items, gap, flex.

html

<nav class="flex items-center justify-between gap-4">
  <a href="/">Nákupní seznam</a>
  <a href="/cart">Košík</a>
</nav>

flex zapne flexbox a položky postaví do řady. Kdybychom chtěli vertikální flexbox, přidáme flex-col.

Rozložení na hlavní ose řídí justify- (justify-start, justify-center, justify-between), na příčné ose items- (items-start, items-center, items-stretch).

Mezeru mezi položkami dělá gap-4 se stejnou škálou jako má padding a margin, tj. gap-4 je 16px.

html

<form class="flex gap-2">
  <input class="flex-1" placeholder="Co koupit?">
  <button class="shrink-0">Přidat</button>
</form>

flex-1 nechá položku zabrat všechno volné místo, shrink-0 jí zakáže se zmenšovat. Když se položky nevejdou do jedné řady, flex-wrap je zalomí na další.

Grid

Dokumentace

V dokumentaci: grid-template-columns, grid-column, gap.

html

<section class="grid grid-cols-3 gap-4">
  <article class="col-span-2">Akce týdne</article>
  <article>Mléko</article>
  <article>Chleba</article>
  <article>Máslo</article>
</section>

grid zapne mřížku a grid-cols-3 jí dá tři stejně široké sloupce. Řádky přibývají samy podle počtu položek.

Položka přes víc sloupců dostane col-span-2, přes celou šířku col-span-full.

Mezeru mezi buňkami dělá opět gap-, zvlášť pro řádky a sloupce gap-y- a gap-x-.