Tailwind CSS poskytuje „ okraj ” třídy obslužných programů, které uživatelům umožňují ovládat rozestupy kolem prvků. The vodorovný okraj přidává prostor na levou a pravou stranu prvku, zatímco a vertikální okraj přidává prostor k horní a spodní části prvku. Tailwind nabízí různé třídy užitných vlastností pro přidání horizontálních nebo vertikálních okrajů k požadovaným prvkům.
Tento článek bude příkladem:
Jak přidat horizontální okraj v Tailwind?
Chcete-li k prvku v Tailwindu přidat vodorovný okraj, „ mx-
Syntax
< živel třída = 'mx-
Zde „mx“ představuje „osu x“ nebo „horizontální okraj“. Nezapomeňte nahradit „
Příklad: Použití vodorovného okraje na prvek HTML
V tomto příkladu použijeme „ mx-10 'užitná třída s ' Chcete-li k prvku v Tailwindu přidat svislý okraj, použijte „ moje- Syntax Příklad: Použití svislého okraje na prvek HTML V tomto příkladu použijeme „ moje-10 'užitná třída s ' Chcete-li v Tailwindu přidat vodorovný a svislý okraj, mx-
< tělo >
< div třída = 'h-screen mx-10 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 zobrazuje okraj na levé a pravé straně kontejneru. To znamená, že vodorovný okraj byl úspěšně aplikován na prvek kontejneru. Jak přidat vertikální okraj v Tailwind?
Zde „my“ představuje „osu y“ nebo „svislý okraj“. Nezapomeňte nahradit „
< div třída = 'h-96 my-10 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 zobrazuje okraj k horní a spodní straně kontejneru. To znamená, že svislý okraj byl účinně aplikován na kontejnerový prvek. Závěr