Rámeček z jedné strany
V CSS jste čáru jen na jedné straně kreslili vlastnostmi border-top, border-bottom a podobnými. V Tailwindu přidáte za border- písmeno strany, a pokud nemá být čára široká 1 pixel, napíšete za něj ještě šířku:
| Třída | CSS |
|---|---|
border-t | border-top-width: 1px; |
border-r | border-right-width: 1px; |
border-b-2 | border-bottom-width: 2px; |
border-l-4 | border-left-width: 4px; |
border-x | border-left-width: 1px;border-right-width: 1px; |
border-y | border-top-width: 1px;border-bottom-width: 1px; |
Písmena stran znáte z polstrování (pt-4, px-6): t je nahoře, r vpravo, b dole, l vlevo, x vlevo i vpravo a y nahoře i dole.
Třída s barvou stranu nepotřebuje: border-orange-300 obarví všechny čtyři strany a vidět jsou jen ty, které mají šířku. (Kdyby měly mít strany různé barvy, existují i třídy jako border-t-orange-500.)
Čára na jedné straně často něco odděluje: border-b pod nadpisem, border-t nad tlačítky dole v kartě. Silnější barevná čára vlevo zase zvýrazní citát nebo důležitou poznámku. Takhle upravíme Oskarův popis.
Jak psát:
Pokyny
Přidejte třídu border-l-4 odstavci s Oskarovým popisem („Odvážný průzkumník…“). Podél jeho levého kraje se objeví čára široká 4 pixely, a zase tmavá: má barvu textu odstavce.
Přidejte třídu border-orange-300, která čáru obarví na oranžovo, a třídu pl-3, aby se text čáry nedotýkal.
Začněte programovat zdarma
2/10