Utilizando transformações no Tailwind

No artigo de hoje, aprenderemos a utilizar algumas classes disponibilizadas pelo Tailwind voltadas ao uso e manipulação de transformações, que são um conjunto de atributos que manipulam escalas, rotações, deslocamento, entre outros. Vamos lá?

O Tailwind é uma ferramenta que facilita demais o uso do CSS. Geralmente, realizamos a estilização de documentos importando um arquivo com extensão .css, que por sua vez possui uma série de atributos que farão toda a mágica por trás das entrelinhas.

Com o Tailwind CSS é bem diferente: é disponibilizado uma determinada lista de classes arquitetadas no modelo atomic css, onde cada uma destas possui uma única função, como aumentar o tamanho de um texto, ou preencher o elemento com a cor branca. Desta forma, basta apenas adicionar um conjunto de classe que, reunidas, desempenhem todas as estilizações que você deseja!

Utilizando o Tailwind CSS

Se você consultar a documentação do Tailwind CSS, perceberá que existem várias formas de instalá-lo. Você pode escolher qualquer um dos passos orientados pelo Tailwind e que se enquadrem com a tecnologia que você está utilizando.

Primeiros passos

Para a prática dos conceitos que estamos aprendendo, criaremos uma página que terá quatro imagens, organizadas no modelo de grid conforme o código a seguir:

No contêiner principal da linha 6 da figura 2, criamos um contêiner principal que terá outros contêineres em seu interior. Nele, inserimos as seguintes classes:

• w-full - fixa a largura do container para 100% do tamanho da largura disponível;
• h-screen - define a altura do container para 100% da altura da viewport (ou seja, 100% da tela disponível para visualização);
• bg-black - define a cor do background da página como preta;
• grid - habilita a organização dos elementos internos no formato grade;
• grid-cols-2 - define que a grade que estamos criando terá duas colunas;
• grid-rows-2 - define que a grade que estamos criando terá duas linhas;
• gap-1 - cria um espaçamento externo de 4px entre os elementos do contêiner principal;
• p-2 - cria um espaçamento interno de 8px para o contêiner principal.
  

Já para os contêineres internos das linhas 7, 10, 13 e 16 da figura 2, além de algumas das classes já explicadas, temos:

• border-2 - cria uma borda com espessura de 8px;
• border-white - define que a cor desta borda seja branca.
  

Por fim, cada contêiner interno possui uma imagem, onde foram definidas as seguintes classes (além de algumas das que já falamos):

• h-full - fixa a altura do container para 100% do tamanho da altura disponível;
• object-cover - amplia a imagem de forma que ela preencha todo o elemento sem distorcer-se.
  

Agora que criamos o ambiente para a prática, vamos explicar os tópicos referentes à scale, rotate, translate, skew e transform origin, onde todos envolvem de uma forma diferente o uso da transformação de elementos.

Scale

O conjunto de classes relacionados ao scale definem qual a escala que utilizaremos para um determinado elemento. Podemos utilizar a manipulação de escalas de duas formas:

• scale-{porcentagem} - aumenta ou diminui a escala de todos os lados de um elemento, onde “porcentagem” é um número entre 0, 50, 75, 90, 95, 100, 105, 110, 125 e 150, que representam as porcentagem concedidas por classes do Tailwind (é possível adicionar novas por meio do arquivo Tailwind.config e mostraremos isto mais adiante);
• scale-x-{porcentagem} ou scale-y-{porcentagem} - aumenta ou diminui a escala de apenas uma das direções de um elemento (X para horizontal e Y para vertical), onde os valores para “porcentagem” são os mesmos dos já citados acima.
  

Para exemplificar o uso e comportamento do scale, vamos definir para cada imagem da nossa página uma escala diferente ao passarmos o mouse sobre cada uma delas. Você observará que o tamanho dos espaços entre as bordas criadas diminui e aumenta de acordo com cada definição de escala criada para as imagens:

No código da Figura 4, definimos hovers para cada imagem, ou seja, sempre que passarmos o mouse por sobre elas, a escala vai de 100 para a definida em cada uma delas. Note na linha 8 que também é possível utilizar valores “negativos”, que servirá para inverter a imagem além de aumentar sua escala.

Rotate

O Rotate serve para rotacionar um elemento. Todas as classes que tem esta função tem a notação rotate-{ângulo}, onde ângulo é um dos valores entre 0, 1, 2, 3, 6, 12, 45, 90 e 180, sendo também possível adicionar novos ângulos por meio do arquivo Tailwind.config (mais uma vez, reforço que veremos isto mais à frente, segura a ansiedade por enquanto!).

Para praticar, vamos alterar a transformação das nossas imagens de scale para rotate, definindo uma rotação para cada imagem que acontecerá quando passarmos o mouse por sobre o elemento:

Translate

O Translate move o elemento de sua posição inicial, seja no eixo horizontal ou no vertical. Diferente dos anteriores, há uma gama muito maior de classes que definem o translado de uma imagem (consulte a documentação para ver todas), onde a sua maioria pode ser utilizada pela notação translate-{direção}-{quantia}: para direção utilizamos X ou Y para definir se queremos a ação horizontalmente ou verticalmente, respectivamente, e quantia pode ser definida por três principais valores:

• px - (move 1px para alguma das direções);
• número - move o elemento em uma distância fixa em pixels (consulte a documentação para verificar os valores disponíveis ou crie seus próprios valores com o uso do Tailwind.Config, como ainda mostraremos);
• fração - move o elemento em uma distância variável de acordo com a porcentagem em relação ao elemento (também é necessário consultar a documentação para verificar os valores disponíveis).
  

Vamos ver um exemplo do uso do translate? Altere as classes rotate para translate, de forma que ao passar o mouse por sobre o elemento, a imagem seja movida em uma direção:

Nem preciso dizer mais uma vez que é possível utilizar valores negativos, não é? Em relação ao eixo x, ao utilizarmos um valor negativo o elemento é movido para a esquerda ao invés de ser movido para a direita. Já com o eixo y, os elementos são movidos para cima ao invés de para baixo.

Skew

O Skew inclina elementos em relação a sua posição inicial. A notação para utilizar este conjunto de classes do Tailwind é skew-{direção}-{quantia}, onde para direção utilizamos X ou Y para definir se queremos a ação horizontalmente ou verticalmente, respectivamente, e para quantia podemos utilizar os valores 0, 1, 2, 3, 6 e 12 (e, como de costume, é possível criar novos valores utilizando o Tailwind.config).

Para o nosso exemplo, substituiremos as classes translate por classes skew, para que, ao passar o mouse por sobre uma imagem, ela seja inclinada para alguma direção:

Transform Origin

Por fim e, não menos importante, podemos definir a origem em que uma transformação ocorre, podendo ser as direções:

• origin-center - utiliza o centro como referência;
• origin-top - se baseia no topo como referência;
• origin-top-right - a referência será ao topo e pela direita;
• origin-right - utiliza o centro como referência;
• origin-bottom-right - a referência será por baixo e pela direita;
• origin-bottom - se baseia por baixo como referência;
• origin-bottom-left - a referência será por baixo e pela esquerda;
• origin-left - utiliza a esquerda como referência;
• origin-top-left - a referência será ao topo e pela esquerda.
  

Criando novos valores para os Transforms

Como foi citado algumas vezes neste artigo, é possível criar novos valores que não são disponibilizados pelo Tailwind CSS. Bem, finalmente o momento chegou!

Independente da forma como você configurou o seu Tailwind, deve ter notado que, seja por meio de um script no head do arquivo HTML, ou, pela criação de um arquivo separado, existe um objeto tailwind.config inserido no nosso projeto. Ele é criado de uma forma diferente para cada maneira como você escolhe instalar o framework, mas, não se desespere: Se você seguiu o passo a passo completo, em algum momento você o implementou e é nele que iremos trabalhar.

Para criar novos valores para scale, rotate, translate e skew que não existam no Tailwind CSS, você pode seguir o exemplo da Figura 13: basta criar um objeto com o nome específico para cada tipo de transformação (o spacing é o único que não carrega o mesmo nome, sendo este referente ao translate neste caso) e definir uma chave e valor, onde a chave será o nome da classe que utilizaremos no nosso código.

Considerações Finais

Incrível como podemos transformar nossos elementos com estes quatro pilares principais que abordamos aqui, não acha? Agora é com você: crie novos códigos utilizando estas classes, faça estilizações incríveis e deixe o seu feedback aqui contando qual foi a melhor das experiências que você teve utilizando o Transform do Tailwind. O que acha?

Caso queira tirar quaisquer dúvidas ou somente bater um papo sobre esses e mais assuntos de outra forma, você também pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn. Te espero ansiosamente!

Bons estudos e até a próxima!