Základní vlastnosti
Většinu běžné práce obstará pár skupin utilit: na písmo, barvy, rozměry a odsazení. Jejich názvy mají předvídatelnou stavbu, takže když pochopíme jednu skupinu, další často dokážeme uhodnout.
Písmo
V dokumentaci: font-size, font-weight, font-family, font-style, text-align.
<h2 class="text-2xl font-bold">Nákupní seznam</h2>
<p class="text-sm italic text-center">Platí do neděle</p>
<code class="font-mono">mleko-2l</code>Velikost písma nastavují třídy text-xs až text-9xl. Výchozí text-base má 16 pixelů, text-sm 14 a text-2xl 24.
Tloušťku určuje font- s názvem řezu: font-normal, font-medium, font-semibold a font-bold.
Kurzíva je italic, zarovnání text-left, text-center a text-right.
Rodinu písma vybírají font-sans, font-serif a font-mono.
Trochu zvláštní nám může připadat, že předpona text- nastavuje velikost, zarovnání i barvu. Tailwind je od sebe rozliší podle toho, co za ní následuje.
Barvy
V dokumentaci: vzorník barev, color, background-color.
<p class="text-red-700 bg-red-50">Mléko došlo</p>
<p class="text-sky-900 bg-sky-100">Chleba koupen</p>Barva se skládá z předpony vlastnosti, názvu barvy a odstínu. text- obarví text, bg- pozadí a border- rámeček. Každá barva výchozí palety má jedenáct odstínů od nejsvětlejšího 50 přes 100, 200 až po nejtmavší 950. Čitelnou dvojici dostaneme snadno: světlý odstín na pozadí a tmavý odstín téže barvy na text.
Průhlednost se připíše za lomítko v procentech, takže bg-black/50 je černá s poloviční průhledností. Bez odstínů jsou jen black, white a transparent.
Padding a margin
<article class="mx-auto max-w-md p-4">
<h2 class="mb-2">Nákupní seznam</h2>
<p class="px-4 py-2">Mléko, chleba, máslo</p>
</article>p- je padding, m- margin. Bez dalšího písmene platí na všechny čtyři strany, x a y vodorovně a svisle a t, r, b, l na jednu stranu (top, right, bottom, left). px-4 py-2 je tedy odsazení zleva i zprava větší než shora a zdola. mx-auto vycentruje blok.
Za čísly v utilitách stojí škála s krokem čtyři pixely. p-4 proto nejsou čtyři pixely, ale čtyři kroky po čtyřech, tedy 16 pixelů. Na tohle se v začátcích s Tailwindem nachytá skoro každý. Stejná škála platí pro šířky, výšky i mezery, takže se všechny rozměry na stránce drží jedné řady.
Šířka a výška
V dokumentaci: width, height, max-width, min-height.
<img class="w-32 h-32" src="milk.jpg" alt="Mléko">
<article class="w-full max-w-md">Nákupní seznam</article>Šířku nastavuje w-, výšku h-. Číslo za nimi je počet kroků stejné škály jako u odsazení, takže w-32 má 128 pixelů. Když má být šířka i výška stejná, stačí jedna třída size-32.
Zlomky počítají s velikostí rodiče: w-1/2 je polovina, w-full celá šířka. h-screen roztáhne prvek na výšku celého okna. Obsahu, který se nemá roztahovat přes celou stránku, se omezí šířka pomocí max-w- s pojmenovanou velikostí, třeba max-w-md.