No Tailwind CSS, o preenchimento é usado para adicionar espaço entre o conteúdo do elemento específico e suas bordas. Adiciona espaçamento extra dentro do elemento. Tailwind CSS fornece um conjunto de utilitários de preenchimento e valores de preenchimento que permitem aos usuários personalizar o espaçamento dos elementos desejados. Além disso, os usuários podem adicionar preenchimento a um único lado, como a parte superior, inferior, esquerda ou direita de um determinado elemento.
Este blog demonstrará os exemplos para adicionar preenchimento a um único lado de um elemento no Tailwind CSS.
Como adicionar preenchimento a um único lado no Tailwind?
Para adicionar preenchimento a um único lado de um elemento no Tailwind, as seguintes classes de utilitários podem ser usadas:
Para entender melhor, confira os exemplos fornecidos abaixo.
Exemplo 1: adicionar preenchimento ao topo de um elemento
Neste exemplo, usaremos o “ pt-10 ” classe utilitária no “ Exemplo 2: adicionar preenchimento à parte inferior de um elemento Neste exemplo, usaremos o “ pb-10 ” classe no “ Exemplo 3: adicionar preenchimento à direita de um elemento Neste exemplo, usaremos o “ pr-10 ” classe no “ Exemplo 4: adicionar preenchimento à esquerda de um elemento Neste exemplo, usaremos o “ pl-10 ” classe no “ Para adicionar preenchimento a um único lado de um elemento no Tailwind, várias classes de utilitários podem ser usadas, como “ pl-
< div aula = 'bg-pink-600 pt-10 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída
A saída acima mostra que o preenchimento foi adicionado ao topo do contêiner.
< div aula = 'bg-pink-600 pb-10 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída 
Pode-se ver que o preenchimento foi adicionado ao fundo do contêiner.
< div aula = 'bg-pink-600 pr-10 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída 
A saída acima mostra que o preenchimento foi adicionado à direita do elemento container.
< div aula = 'bg-pink-600 pl-10 w-max' >
Preenchimento em CSS do Tailwind
div >
corpo >
Saída 
Pode-se observar que o padding foi adicionado à esquerda do container. Conclusão