V Tailwind CSS, a okraj se používá k ovládání mezery kolem konkrétního prvku. Dodává prostor mezi aplikovaným prvkem a jeho okolními prvky. Tailwind CSS poskytuje sadu nástrojů pro okraje a hodnot okrajů, které uživatelům umožňují přizpůsobit rozestupy kolem požadovaných prvků. Kromě toho mohou uživatelé přidat okraj na jednu stranu, jako je horní, dolní, levá nebo pravá část určitého prvku.
Tento blog předvede příklady přidání okraje na jednu stranu prvku v Tailwind CSS.
Jak přidat okraj na jednu stranu ve službě Tailwind?
Chcete-li přidat okraj na jednu stranu prvku v Tailwindu, lze použít následující třídy obslužných programů:
Abyste tomu lépe porozuměli, projděte si níže uvedené příklady.
Příklad 1: Přidejte okraj k horní části prvku
V tomto příkladu použijeme „ mt-14 'užitná třída v ' Výstup Příklad 2: Přidejte okraj na konec prvku V tomto příkladu použijeme „ mb-14 “ třídy v “ Příklad 3: Přidejte okraj nalevo od prvku V tomto příkladu použijeme „ ml-14 “ třídy v “ Příklad 4: Přidejte okraj napravo od prvku V tomto příkladu použijeme „ pan-14 “ třídy v “ Chcete-li přidat okraj na jednu stranu prvku v Tailwindu, lze použít různé třídy užitných vlastností, například „ ml-
< div třída = 'h-96 mt-14 bg-purple-500' >
< p třída = 'text-5xl text-center' > Okraj v Tailwind CSS p >
div >
tělo >
Tady:
Výše uvedený výstup ukazuje, že okraj byl přidán do horní části kontejneru.
< div třída = 'h-96 mb-14 bg-purple-500' >
< p třída = 'text-5xl text-center' > Okraj v Tailwind CSS p >
div >
tělo >
Výstup 
Je vidět, že okraj byl přidán na dno nádoby.
< div třída = 'h-96 ml-14 bg-purple-500' >
< p třída = 'text-5xl text-center' > Okraj v Tailwind CSS p >
div >
tělo >
Výstup 
Výše uvedený výstup ukazuje, že okraj byl přidán vlevo od prvku kontejneru.
< div třída = 'h-96 mr-14 bg-purple-500' >
< p třída = 'text-5xl text-center' > Okraj v Tailwind CSS p >
div >
tělo >
Výstup 
Jak vidíte, okraj byl efektivně přidán napravo od kontejneru. Závěr