Uma das preocupações de design mais comuns em qualquer projeto é gerenciar o espaçamento, e é aí que o preenchimento do Tailwind entra em jogo. O Tailwind oferece um conjunto de classes de serviços públicos especificamente para preenchimento, dando aos desenvolvedores a flexibilidade de controlar o espaçamento sem o incômodo de escrever CSS personalizados. Neste guia, mergulharemos profundamente em como o preenchimento do Tailwind funciona, exploraremos as opções disponíveis e demonstraremos como aplicá-las a projetos do mundo real.

Uso básico

Ao trabalhar com o encantamento do Tailwind, é importante saber como aplicar o preenchimento a várias partes de um elemento. O Tailwind simplifica isso, oferecendo classes de utilidade simples para diferentes lados, eixos ou todos os lados de um elemento. Aqui está uma rápida quebra dos casos básicos de uso de preenchimento:

Adicionando preenchimento a um único lado

você pode usar os utilitários do Tailwind como pt-*, pr-*, pb-*e pl-*para aplicar facilmente o preenchimento em lados específicos de um elemento.

Código:

pt-6
pr-4
pb-8
pl-2

Por exemplo:

• Pt-6 adiciona 1,5rem de preenchimento ao topo.
• PR-4 adiciona 1Rem de estofamento à direita.
• O PB-8 adiciona 2rem de preenchimento ao fundo.
• PL-2 adiciona 0,5rem de preenchimento à esquerda.

Essas classes simples oferecem controle total sobre o espaçamento nos lados individuais de seus elementos, permitindo ajustes mais precisos do design.

Adicionando preenchimento horizontal

Para adicionar preenchimento horizontal a um elemento, o Tailwind fornece a classe PX-* Utility, que aplica o estofamento igual aos lados esquerdo e direito do elemento.

Código:

px-8

Por exemplo:

• PX-4 adiciona 1Rem de preenchimento aos lados esquerdo e direito.
• PX-6 adiciona 1.5Rem a ambos os lados.

isso ajuda você a manter o espaçamento horizontal consistente em todo o seu design, tornando -o perfeito para elementos que requerem preenchimento equilibrado em ambos os
Esquerda e direita, como botões ou barras de navegação.

Adicionando preenchimento vertical

para controlar o preenchimento vertical no Tailwind, você pode usar a classe de utilidade py-*, que adiciona igual preenchimento à parte superior e inferior de um elemento.

Código:

py-8
 

Por exemplo:

• O PY-4 adiciona 1Rem de preenchimento à parte superior e inferior.
• py-8 adiciona 2rem de preenchimento vertical.

usando py-* é ideal para gerenciar o espaçamento vertical, especialmente em elementos como contêineres ou seções em que o preenchimento superior e inferior aprimora a estrutura de legibilidade e layout.

Adicionando preenchimento a todos os lados

Para adicionar estofamento igual em todos os lados de um elemento, o Tailwind fornece a classe P-* utilitária, que aplica a mesma quantidade de preenchimento na parte superior, direita, inferior e esquerda.

Código:

p-8

Por exemplo:

• P-4 adiciona 1Rem de preenchimento aos quatro lados.
• P-8 aplica-se 2REM de estofamento uniformemente através do elemento.

Este utilitário é ótimo para criar elementos uniformemente espaçados, garantindo um preenchimento consistente em torno do conteúdo sem especificar manualmente cada lado.

Usando propriedades lógicas

Tailwind também oferece utilitários ps-* e pe-* para controlar o preenchimento lógico, que se adaptam com base na direção do texto. Essas propriedades lógicas ajustam o preenchimento de início e final com base no fato de o conteúdo fluir da esquerda para a direita (LTR) ou da direita para a esquerda (RTL).

Código:

  
ps-8
 
  
pe-8



  
ps-8
 
  
pe-8

Por exemplo:

• O PS-4 adiciona 1Rem de estofamento ao início do elemento, que seria o lado esquerdo na LTR e o lado direito na RTL.
• O PE-6 adiciona 1,5rem de estofamento ao final do elemento, mapeando para a direita na LTR e a esquerda em Rtl.

O uso de propriedades lógicas é especialmente útil para projetos que suportam vários idiomas ou requerem ajustes dinâmicos de layout.

Aplicando condicionalmente

O preenchimento de Tailwind permite aplicar classes de utilitário condicionalmente usando modificadores variantes. Isso é extremamente útil quando você precisa modificar os estilos com base na interação do usuário (como o hover ou o foco) ou aplicar estilos, dependendo dos tamanhos da tela e consultas de mídia.

Pairar, foco e outros estados

Você pode usar modificadores variantes para aplicar o preenchimento (ou outros utilitários) somente quando certos estados como o mouse ou o foco estiverem ativos. Por exemplo, Passe o Py-8 aplicará um preenchimento vertical do 2REM quando o elemento for pairado.

Código:

  Hover over me to see the vertical padding increase!

Neste exemplo, o elemento terá um preenchimento de base de 1Rem, mas quando você passa o mouse, o preenchimento vertical aumenta para o 2REM.

Pontos de interrupção e consultas de mídia

Tailwind também suporta modificadores de variantes para diferentes tamanhos de tela usando pontos de interrupção responsivos como MD, LG, XL, etc. Por exemplo, MD: PY-8 aplicará um preenchimento vertical de 2REM apenas em telas de médio porte e acima.

Código:

... Redimensione o navegador para ver a mudança de preenchimento em tamanhos de tela média.

  Resize your browser to see the padding change at medium screen sizes.

Neste exemplo, o elemento terá preenchimento padrão, mas quando o tamanho da tela atingir o ponto de interrupção média (768px e acima), o preenchimento vertical mudará para 2Rem.

Usando valores personalizados no Tailwind

O enchimento do Tailwind fornece uma maneira flexível de personalizar o preenchimento, permitindo modificar a escala de espaçamento padrão ou aplicar valores arbitrários únicos. Esse recurso é incrivelmente útil quando você precisa de preenchimento específico que vai além da escala padrão.

Personalizando seu tema

Por padrão, a escala de preenchimento do Tailwind segue o sistema de espaçamento padrão, mas você pode modificá -lo facilmente editando seu arquivo Tailwind.config.js. Você tem duas maneiras de fazer isso: ajustando a escala de espaçamento geral ou apenas focando no preenchimento especificamente.

Exemplo: Personalizando a escala de espaçamento: No seu arquivo Tailwind.config.js, você pode estender a escala de espaçamento para incluir valores personalizados, como um preenchimento de 5px.

module.exports = { tema: { estender: { Espaçamento: { '5px': '5px', } } } }

  Resize your browser to see the padding change at medium screen sizes.

Com isso, você pode usar seu valor de espaçamento personalizado no preenchimento, margem e outros utilitários de espaçamento:

  Resize your browser to see the padding change at medium screen sizes.

Como alternativa, você pode estender apenas a escala de preenchimento:

module.exports = { tema: { estender: { preenchimento: { '5px': '5px', } } } }

  Resize your browser to see the padding change at medium screen sizes.

Este método mantém as personalizações isoladas para preencher sem alterar a escala de espaçamento mais ampla.

Valores arbitrários

; Isso permite que você adicione rapidamente valores únicos de preenchimento personalizado sem modificar seu arquivo Tailwind.config.js.

Exemplo: Valor de preenchimento arbitrary

  This element has an arbitrary padding of 5px!

Conclusão

O preenchimento do Tailwind simplifica o espaçamento com serviços públicos como pt-*, pr-*, pb-* e pl-* para lados específicos e px-* e py-* para preenchimento horizontal e vertical. O utilitário p-* aplica preenchimento igual em todos os lados. Propriedades lógicas (ps-*, pe-*) ajuste o preenchimento com base na direção do texto, ideal para layouts multilíngues.

Você pode aplicar condicionalmente preenchimento usando estados de pairar (Hover: PY-8) ou pontos de interrupção responsivos (MD: PY-8). Tailwind também permite valores de preenchimento personalizados em Tailwind.config.js ou valores arbitrários como P- [5px].

Esses utilitários fornecem uma maneira flexível e eficiente de gerenciar o preenchimento em qualquer projeto. Para mais detalhes, visite a documentação oficial do Tailwind CSS.