Como utilizar o Flexbox com Tailwind CSS - Parte 1

A cada dia que passa, mais e mais frameworks e bibliotecas surgem para melhorar a qualidade de vida do programador. Com o objetivo de facilitar e simplificar as implementações, muitos alcançam uma visibilidade tão gigantesca que fica difícil ser inserido em um determinado meio sem nunca sequer ter pelo menos ouvido algo ou alguém citar seus nomes. Este é o caso do Tailwind CSS.

Criado com o intuito de ser uma forma mais prática de aplicar estilos CSS em um determinado projeto, o Tailwind foi abraçado pela comunidade e hoje é utilizado por muita gente. Visando trazer para nossos estimados leitores um pouco mais sobre as incríveis façanhas que este framework pode nos conceder, neste artigo vamos destrinchar alguns atributos voltados ao Flexbox, conceito essencial para a estilização CSS.

Um pouco mais sobre o Tailwind CSS

Como já foi dito, o Tailwind é um framework criado com o objetivo 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 tornar a cor do background de um elemento preto ou transformar o seu texto em negrito.

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 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 font-size, font-weight, ou text-decoration) que é disponibilizado o nome da classe que atende à demanda e como utilizá-la.

O que é Flexbox?

O Flexible Box Module (ou Flexbox para os mais íntimos) é um modelo de layout criado com o objetivo de proporcionar diversas funcionalidades voltadas ao alinhamento e organização espacial de elementos.

Por meio dele, podemos definir configurações indispensáveis para uma estilização CSS de uma página, como por exemplo organizar elementos horizontalmente ou verticalmente, centralizar o conteúdo de um elemento ou alinhá-lo a um dos lados direito ou esquerdo e por aí vai. Sem a menor sombra de dúvidas, um bom utilizador do CSS entende muito bem e utiliza a todo momento o Flexbox em sua implementação.

O Tailwind CSS é para todos!

Existem diversas formas de instalar o Tailwind CSS no seu projeto e na documentação do mesmo há um guia prático para cada situação onde pode ele ser utilizado. Basta seguir o passo a passo específico em que sua situação se encaixa e ser feliz!

Um olhar mais a fundo no Flexbox do Tailwind

Para praticar o uso do Flexbox, criaremos algo simples. Teremos um container principal que possuirá três outros containers. Dentro de cada um dos três, haverá um parágrafo com um texto, indicando um nome para cada item. Utilizaremos algumas classes do Tailwind já nesta fase, mas não se preocupe, todas elas serão devidamente explicadas:

No container (div) principal, utilizamos três classes para estilização: bg-black, w-full, h-screen e p-2. Com isso indicamos, respectivamente, que queremos que a cor do background da nossa página seja preta, a largura seja de 100%, a altura seja de 100% da altura da viewport (ou seja, 100% da tela disponível para visualização) e o espaçamento interno seja de 8 px.

Dentro deste container principal há outros três, onde indicamos em suas classes cores de background diferentes para cada um. Também definimos uma margem externa de 8 px (m-2), uma altura de 80 px (h-20) e uma largura de 160 px (w-40).

Por fim, temos o parágrafo com as classes p-4, m-1,  font-bold e text-xl. Estamos, respectivamente, informando que o espaçamento interno de cada parágrafo será de 16 px, o espaçamento externo será de 4 px, a espessura da fonte será de 700 e o tamanho do texto será de 20px. Como você pode ver, são diversas estilizações css que geralmente utilizamos no dia a dia, divididas cada uma em uma classe do Tailwind.

Imagine que você queira alinhar estes blocos horizontalmente ao invés de verticalmente, como se encontram na figura 3. A classe flex nos ajudará com isso.

Por padrão, o uso apenas da classe flex define que a direção em que os itens de um elemento devem ser organizados será horizontal. Todavia, podemos definir estes termos manualmente com flex-row (que já vem como padrão caso não utilizamos nenhuma das duas classes que definem a direção) e flex-col (que organiza os itens verticalmente).

Bem, já entendemos que a classe flex serve para definir a forma como os elementos dentro de um elemento se organizam. Mas como definimos a posição dos itens de um container de acordo com a forma que queremos? E se quiséssemos que ao invés de estarem no início do eixo, estivessem ao centro?

Antes de tudo, remova a classe flex-col, como na figura 4, com o intuito de  definir uma organização horizontal dos elementos. Agora, vamos inserir no container principal a classe justify-center. Quando utilizamos a organização na direção horizontal (flex-row), o justify-center alinha todos os itens ao centro em relação ao eixo x. Quando estamos utilizando uma organização na direção vertical, o justify-center alinha todos os itens ao centro em relação ao eixo y.

É importante destacar que, assim como o atributo justify-content possui diversas formas de alinhamento, o Tailwind também disponibiliza uma classe para cada uma delas:

• O justify-start alinha os elementos para o começo do eixo principal do elemento:
  

• O justify-end define o alinhamento dos elementos para o fim do eixo principal do elemento:
  

• O justify-between define o alinhamento de forma que haja um espaço igual entre os elementos:
  

• Já o justify-around alinha os elementos contidos de forma que haja um espaço igual de cada lado de cada item:
  

• Por fim, o justify-evenly alinha os elementos contidos dentro do elemento de forma que haja um espaço igual de cada lado de cada item, mas também considerando a duplicação do espaço que geralmente existiria ao utilizar justify-around:
  

Mas e se quisermos alinhar um elemento ao centro tanto em relação ao eixo horizontal quanto ao vertical? Aí, meus caros, entraremos em um outro conjunto de classes do Tailwind, onde dentre elas utilizaremos a classe items-center:

Enquanto as classes que começam com justify que foram aqui apresentadas alinham os itens em relação ao eixo em que estão direcionadas (ou seja, alinhamento vertical para direção vertical e alinhamento  horizontal para direção horizontal), as classes items fazem o oposto: alinhamento horizontal em relação à direção vertical e alinhamento  vertical em relação à direção horizontal:

• A classe items-stretch estica os itens de forma que eles tomem todo o eixo transversal. Ela é o padrão caso nenhuma classe items for repassada em um elemento e, para ver o efeito da consequência de se utilizar esta classe, basta remover a altura e largura dos três containers internos:
  

• A classe items-start alinha os itens para o início do eixo transversal:
  

• Já a classe items-end alinha os elementos para o fim do eixo transversal:
  

• A classe items-baseline alinha os elementos de forma que a base deles esteja alinhada, independente do tamanho de cada elemento (crie espaçamentos internos e externos diferentes para cada um dos blocos para chegar ao resultado da figura 19):
  

Considerações finais

Se você explorar a documentação do Tailwind CSS, verá que ainda há muito sobre o Flexbox a ser visto. Todavia, sem dúvida, entender estes conceitos aqui apresentados são a base e a chave para dominar com excelência todos os outros mais complexos que possam existir.

Dito isto, essa é a hora de praticar muito e fixar estes conhecimentos da melhor maneira possível. Em breve, voltaremos com mais conversas sobre o Flexbox, então fica atento que daqui a pouco tem mais! Por enquanto, esperamos o feedback de vocês nos comentários sobre o quanto este artigo ajudou vocês a dominar as classes do Tailwind relacionadas ao Flexbox.

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!