No Tailwind CSS, preenchimento é o espaço entre o conteúdo do elemento específico e sua borda. Preenchimento horizontal é o espaço à esquerda e à direita do elemento, enquanto preenchimento vertical é o espaço na parte superior e inferior de um elemento. O Tailwind oferece várias classes de utilitários para adicionar preenchimento horizontal ou vertical aos elementos desejados.
Este artigo irá ilustrar:
Como adicionar preenchimento horizontal no Tailwind?
Para adicionar preenchimento horizontal a um elemento no Tailwind, a classe “px-
Sintaxe
< elemento aula = 'px-0 ...' > ... elemento >
Aqui “px” representa o “eixo x” ou “preenchimento horizontal”.
Exemplo: aplicando preenchimento horizontal a um elemento HTML
Neste exemplo, usaremos o “ px-20 ” classe utilitária com o “ Para adicionar preenchimento vertical a um elemento no Tailwind, use o botão “ py- Sintaxe Exemplo: aplicando preenchimento vertical a um elemento HTML Neste exemplo, usaremos o “ py-20 ” classe utilitária com o “ Para adicionar o preenchimento horizontal e vertical no Tailwind, o “ px-
< corpo >
< div aula = 'bg-pink-600 px-20 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída 
A saída acima mostra o preenchimento nos lados esquerdo e direito do contêiner. Isso indica que o preenchimento horizontal foi aplicado ao elemento container com sucesso. Como adicionar preenchimento vertical no Tailwind?
Aqui, “py” representa o “eixo y” ou “preenchimento vertical”.
< div aula = 'bg-pink-600 py-20 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída 
A saída acima mostra o preenchimento nas partes superior e inferior do contêiner. Isso indica que o preenchimento vertical foi efetivamente aplicado ao elemento contêiner. Conclusão