Polstrování z jedné strany

Tlačítko pořád těsně obepíná svůj text: Adoptovat Lunu. Tlačítka obvykle potřebují víc místa vlevo a vpravo než nahoře a dole: Adoptovat Lunu. Třída p-* nastaví všechny čtyři strany stejně, a proto má Tailwind pro jednotlivé směry a strany další třídy polstrování:

Písmena jsou zkratky anglických slov: t top (nahoře), r right (vpravo), b bottom (dole) a l left (vlevo). x a y jsou osy, které znáte z matematiky: x je vodorovná (vlevo a vpravo) a y svislá (nahoře a dole). (Tailwind ve skutečnosti zapisuje px-4 jako padding-inline: 1rem a py-4 jako padding-block: 1rem. V jazycích, které se píší zleva doprava, je padding-inline polstrování vlevo a vpravo a padding-block nahoře a dole.)

Třídy můžete kombinovat: p-4 pt-8 dá prvku 16 pixelů na všech stranách kromě horní, kde bude 32. Třída pro jednu stranu vyhraje bez ohledu na pořadí tříd, protože Tailwind dává pravidla pro jednotlivé strany ve svém CSS až za pravidlo pro všechny strany, a ze dvou stejně specifických pravidel vyhrává to pozdější, jak víte z kaskády. (Na pořadí tříd v atributu class nikdy nezáleží.) Jak jste ale viděli v minulé lekci, nedávejte prvku dvě třídy pro totéž, třeba p-4 p-6: podle HTML nepoznáte, která z nich vyhraje.