Tailwind CSS fornece “ margem ” classes utilitárias que permitem aos usuários controlar o espaçamento em torno dos elementos. O margem horizontal adiciona espaço ao lado esquerdo e direito de um elemento, enquanto um margem vertical adiciona espaço à parte superior e inferior de um elemento. O Tailwind oferece várias classes de utilitários para adicionar margens horizontais ou verticais aos elementos desejados.
Este artigo exemplificará:
Como adicionar uma margem horizontal no Tailwind?
Para adicionar uma margem horizontal a um elemento no Tailwind, o “ mx-
Sintaxe
< elemento aula = 'mx-
Aqui, “mx” representa o “eixo x” ou “margem horizontal”. Certifique-se de substituir “
Exemplo: aplicando uma margem horizontal a um elemento HTML
Neste exemplo, usaremos o “ mx-10 ” classe utilitária com o “ Para adicionar uma margem vertical a um elemento no Tailwind, use o botão “ meu- Sintaxe Exemplo: aplicando uma margem vertical a um elemento HTML Neste exemplo, usaremos o “ meu-10 ” classe utilitária com o “ Para adicionar a margem horizontal e vertical no Tailwind, o “ mx-
< corpo >
< div aula = 'h-screen mx-10 bg-roxo-500' >
< p aula = 'texto-5xl centro de texto' > Margem em CSS do Tailwind p >
div >
corpo >
Saída 
A saída acima mostra a margem para os lados esquerdo e direito do contêiner. Isso indica que a margem horizontal foi aplicada ao elemento container com sucesso. Como adicionar uma margem vertical no Tailwind?
Aqui, “meu” representa o “eixo y” ou “margem vertical”. Certifique-se de substituir “
< div aula = 'h-96 my-10 bg-purple-500' >
< p aula = 'texto-5xl centro de texto' > Margem em CSS do Tailwind p >
div >
corpo >
Saída 
A saída acima mostra a margem para os lados superior e inferior do contêiner. Isso indica que a margem vertical foi efetivamente aplicada ao elemento contêiner. Conclusão