Tailwind CSS poskytuje „ marža ” pomocné triedy, ktoré umožňujú užívateľom ovládať rozostupy okolo prvkov. The horizontálny okraj pridáva priestor na ľavú a pravú stranu prvku, zatiaľ čo a vertikálny okraj pridáva priestor k hornej a spodnej časti prvku. Tailwind ponúka rôzne úžitkové triedy na pridanie horizontálnych alebo vertikálnych okrajov k požadovaným prvkom.
Tento článok bude príkladom:
Ako pridať vodorovný okraj v systéme Tailwind?
Ak chcete k prvku v Tailwinde pridať vodorovný okraj, „ mx-
Syntax
< element trieda = 'mx-
Tu „mx“ predstavuje „os x“ alebo „horizontálny okraj“. Nezabudnite nahradiť „
Príklad: Použitie vodorovného okraja na prvok HTML
V tomto príklade použijeme „ mx-10 'úžitková trieda s ' Ak chcete k prvku v Tailwinde pridať zvislý okraj, použite „ moja- Syntax Príklad: Použitie zvislého okraja na prvok HTML V tomto príklade použijeme „ moja-10 'úžitková trieda s ' Ak chcete v Tailwinde pridať vodorovný a zvislý okraj, mx-
< telo >
< div trieda = 'h-screen mx-10 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Výkon 
Vyššie uvedený výstup zobrazuje okraj na ľavej a pravej strane kontajnera. To znamená, že vodorovný okraj bol úspešne aplikovaný na prvok kontajnera. Ako pridať vertikálny okraj v systéme Tailwind?
Tu „môj“ predstavuje „os y“ alebo „vertikálny okraj“. Nezabudnite nahradiť „
< div trieda = 'h-96 my-10 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Výkon 
Vyššie uvedený výstup zobrazuje okraj hornej a spodnej strany kontajnera. To znamená, že vertikálny okraj bol účinne aplikovaný na kontajnerový prvok. Záver