Tailwind

Espaçamentos e Tamanhos com Tailwind

Bruno Gabryell Cabral Da Silva

• 7 min read
Espaçamentos e Tamanhos com Tailwind

Existem detalhes na vida que são essenciais para que possamos desempenhar certas atividades ao longo dela. Ter a noção de espaço para estacionar um carro sem bater no que está ao lado, saber quanto tempo é gasto para ir de casa para o trabalho sem se atrasar, calcular quanto na carteira ainda pode ser gasto sem prejudicar as contas no fim do mês…

Tudo isso é tão natural que se dilui no nosso dia a dia, embora tem sua devida importância. No mundo da programação não poderia ser diferente: precisamos ter certas noções muito bem fixas em nossa mente para que se tornem tão naturais quanto fazer qualquer uma destas atividades mencionadas.

No artigo de hoje aprenderemos a utilizar classes do Tailwind para trabalhar com conceitos muito presentes e normais no dia a dia de quem estiliza com o CSS: tamanhos e espaçamentos.

O que é o Tailwind CSS?

O Tailwind é um framework criado com o intuito de otimizar o uso do CSS. Ao invés da estilização ser feita por classes criadas manualmente pelo programador (onde seus atributos são definidos em um arquivo importado com extensão .css), este framework disponibiliza um conjunto de classes arquitetadas no modelo atomic css, onde cada classe possui um única função, como por exemplo aplicar a cor vermelha para o background de um elemento ou transformar o seu texto em itálico. Todo este conjunto de classes pode ser encontrado na documentação do Tailwind CSS e, mesmo que nenhuma delas corresponda a sua necessidade, você também pode criar uma nova que o faça!

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind CSS, que além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo object-fit, margin ou display) que é disponibilizado o nome da classe que atende à demanda e como utilizá-la.

Dicas para utilizar o Tailwind CSS

Existem diversas formas de instalar o Tailwind CSS no seu projeto, de acordo com a tecnologia que você está utilizando. Na documentação deste framework há um guia prático para cada cenário onde ele pode ser utilizado. Basta seguir o passo a passo específico em que sua situação se encaixa e ser feliz!

Figura 1 - Guia de instalação do Tailwind CSS na sua documentação.
💡
Observação: A forma mais rápida de se implementar o Tailwind é inserindo o CDN disponibilizado pela documentação. É só adicioná-lo no head do seu documento HTML e deixar que ele faça toda a magia. Também é importante destacar que os exemplos que usaremos neste artigo serão de um projeto desenvolvido com o React.js. Todavia, não se preocupe, pois todo o conhecimento compartilhado aqui pode ser aplicado em qualquer outro cenário em que se possa utilizar o Tailwind CSS.

Sendo assim, não estranhe se o nome da propriedade de classe em um elemento for className ao invés de class: ambas têm o mesmo objetivo, mas no React, por convenção, se utiliza a primeira. Dito isto, vamos em frente?

Criando um projeto para a prática

Chegou a hora de começar a desenvolver uma aplicação onde poderemos trabalhar com os espaçamentos e tamanhos utilizando Tailwind CSS. Veja o código a seguir:

Figura 2 - Criando uma aplicação para a prática.

No exemplo da Figura 2, criamos um contêiner principal que possui a classe flex. Esta classe fará com que a característica de cada contêiner interno mude de block para inline, de forma que eles passarão a se organizar lado a lado, ao invés de um abaixo do outro. Além disso, cada contêiner interno possui, além de um valor em seu interior, classes que mudam as cores do background para vermelho, verde, amarelo e azul (bg-red-600, bg-green-600, bg-yellow-500 e bg-blue-500, respectivamente).

Se você executar este código, verá que não há muito a ser exibido além de números envolvidos em pequenos blocos coloridos. Tudo isto está prestes a mudar em instantes, se você se dispuser a continuar conosco nesta jornada.

Figura 3 - Execução do código da Figura 2.

Espaçamentos no Tailwind CSS

Quando falamos de espaçamentos em estilizações CSS, nos referimos a atributos que são capazes de “afastar” elementos uns dos outros, ou distanciar os limites dos elementos em relação ao seu conteúdo. Dividimos este conceito em dois atributos principais: Padding e Margin.

Padding

Este atributo é responsável por definir um espaçamento interno para um elemento, de forma que seja possível dar mais espaço para o interior dele, gerando uma espécie de borda invisível. No Tailwind, existe uma série de classes que desempenham esta função, todas elas começando com a letra “p”, seguida da especificação desejada para o espaçamento. Vamos experimentar utilizar a classe “p-10” em todos os contêineres internos do nosso projeto e notar a diferença gritante que teremos a seguir:

Figura 4 - Adicionando um espaçamento interno nos contêineres internos.

Figura 5 - Execução do código da Figura 4.

Notou a diferença? Neste caso, aplicamos um espaçamento uniforme para todas as quatro direções do contêiner, mas podemos aplicar tamanhos específicos para cada direção:

  • pl-10 - cria um espaçamento interno somente para o lado esquerdo do contêiner (padding-left);
  • pr-10 - define um espaçamento interno apenas para o lado direito do contêiner (padding-right);
  • pt-10 - produz um espaçamento interno para o topo (ou parte de cima) do contêiner (padding-top);
  • pb-10 - aplica um espaçamento interno para a parte de baixo do contêiner (padding-bottom);
  • px-10 - cria um espaçamento interno apenas para o eixo horizontal do contêiner (padding-left e padding-right);
  • py-10 - define um espaçamento interno apenas para o eixo vertical do contêiner (padding-top e padding-bottom).
💡
Observação: O numeral 10 exemplificado nos tópicos anteriores diz respeito ao tamanho que podemos escolher de acordo com a necessidade. Para consultar todos os tamanhos disponíveis para espaçamentos internos, consulte a documentação do Tailwind CSS.

Margin

O atributo Margin do Tailwind segue a mesma lógica das linhas de classes responsáveis pelo padding, só que para espaçamentos externos. Vamos inserir nos nossos contêineres internos a classe m-5 e ver o resultado que será obtido:

Figura 6 - Adicionando um espaçamento externos para os contêineres.

Figura 7 - Contêineres separados uns dos outros por meio da classe m-5.


Agora, para todas as direções, há uma espécie de borda externa que afasta os elementos uns dos outros. Da forma como fizemos, foi criado um espaçamento externo uniforme para todas as direções do elemento, mas assim como o padding, também temos muitos conjuntos de classes personalizados para o margin:

  • ml-5 - cria um espaçamento externo somente para o lado esquerdo do contêiner (margin-left);
  • mr-5 - define um espaçamento externo apenas para o lado direito do contêiner (margin-right);
  • mt-5 - produz um espaçamento externo para o topo (ou parte de cima) do contêiner (margin-top);
  • mb-5 - aplica um espaçamento externo para a parte de baixo do contêiner (margin-bottom);
  • mx-5 - cria um espaçamento externo apenas para o eixo horizontal do contêiner (padding-left e margin-right);
  • my-5 - define um espaçamento externo apenas para o eixo vertical do contêiner (padding-bottom e margin-bottom).
💡
Observação: O numeral 5 que utilizamos como exemplo nos tópicos supracitados se refere ao tamanho que podemos escolher de acordo com a necessidade do projeto. Para consultar todos os tamanhos disponíveis para espaçamentos externos, consulte a documentação do Tailwind CSS.


Tamanhos no Tailwind CSS

Enquanto os Espaçamentos Padding e Margin definem algo como “bordas invisíveis” para o elemento, os tamanhos definem quão grandes os elementos podem ser e quanto da tela poderão ocupar, em termos de largura (width) e altura (height).

Width e Height

Enquanto o atributo width define qual será a largura de um elemento, com o atributo height podemos definir a altura do mesmo, repassando especificações precisas que darão elegância à aplicação com a combinação dos dois. O Tailwind nos fornece categorias de classes para manipulá-los, sendo as principais:

  • Números - Na documentação do Tailwind CSS é possível encontrar diversas classes com numerais que definem um tamanho fixo para um elemento (por exemplo, w-10 ou h-10 definem uma largura ou altura de 40 px, respectivamente);
  • Frações - Pensando em recursividade, é possível definir qual a porcentagem de espaço que um elemento pode ter, tanto para altura quanto para largura (por exemplo, w-1/2 e h-1/2 definem que um elemento terá uma largura e altura iguais a metade do tamanho disponível);
  • Screen e Full - As classes w-screen e h-screen definem que a largura e altura do contêiner serão 100 % da altura da viewport (ou seja, 100% da tela disponível para visualização), enquanto as classes w-full e h-full definem que a largura e altura do contêiner terão um percentual de 100 % do tamanho disponível.
💡
Observação: Assim como existem os atributos min-width, min-height, max-width e max-height no CSS, o Tailwind CSS também nos fornece classes das quais podemos utilizar para definir um tamanho máximo e mínimo para um elemento. A terminologia é a mesma utilizada para width ou height, seja para números, frações e demais definições possíveis presentes na documentação (min-width-10, ou max-height-full, por exemplo).

Considerações finais

Como você pode perceber, o Tailwind CSS facilita muito a nossa vida, nos concedendo diversas ferramentas para que possamos trabalhar com todos os atributos que o CSS possui com o mínimo de complexidade possível, não sendo diferente para espaçamentos e tamanhos.

Quero saber o que você achou deste artigo e o quanto ele te ajudou. Caso queira tirar quaisquer dúvidas ou somente trocar uma ideia sobre esses e mais assuntos de outra forma, pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn.

Bons estudos e até a próxima!

💡
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.