Tailwind CSS introdução

Tailwind CSS introdução

Neste post iremos apresentar uma introdução aos recursos do Tailwind CSS de forma a que após ler o texto você possa decidir se vale a pena aprender mais e passar a utilizar o Tailwind CSS em seus novos projetos.

Neste tutorial de programação apresentaremos duas formas de instalar o framework e usaremos exemplos práticos de código para apresentar alguns conceitos chave do Tailwind CSS.

Um framework CSS

Antes de iniciarmos o estudo faço uma advertência, como você deve saber existem vários frameworks CSS e sem dúvida eles facilitam o trabalho dos desenvolvedores. Sempre que puder faça uso deles pois, além de outras vantagens, eles inegavelmente têm a capacidade de aumentar sua produtividade.

Porém, em minha humilde opinião, os desenvolvedores também precisam saber desenvolver usando o CSS puro, sem frameworks, pois com isto terão uma base sólida de conhecimento que poderão utilizar em qualquer framework com que forem trabalhar.

Sobre o Tailwind CSS

O framework Tailwind CSS é relativamente recente, tendo sido sua primeira versão Alpha lançada em novembro de 2017 e a primeira versão estável disponibilizada em maio de 2019. No entanto, a utilização e popularidade deste framework tem aumentado nos últimos anos.

Parte desta popularidade se deve ao fato deste framework ter se demonstrado excelente para construção de protótipos, pois com ele é possível iniciar com um código html simples e ir aos poucos construindo interfaces complexas com alterações apenas no código html original.

Assim, o Tailwind CSS está sendo cada vez mais adotado pelos desenvolvedores, um exemplo disto é a decisão recente do criador do framework Laravel de substituir neste framework o Bootstrap pelo Tailwind CSS.

Template inicial

Nos exemplos que iremos apresentar vamos sempre fazer uso do template HTML abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    
</body>
</html>

Este template é necessário, pois de acordo com a documentação, para que os estilos do Tailwind sejam aplicados da maneira que se espera, a página html deve ter definidos pelo menos o doctype e incluir as definições de viewport para ser capaz de lidar com os estilos responsivos nos vários tipos de dispositivos.

Conheça nosso Novo Curso NUXT.js e TailwindCSS para turbinar a criação de front-ends

Instalação CDN

Prosseguindo com nossos primeiros passos vamos, inicialmente, instalar o Tailwind usando uma rede CDN. Para isso insira em nosso arquivo exemplo, dentro das tags <head></head> a declaração abaixo.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Limitações da CDN

Apesar de ser rápida e fácil para iniciar os estudos do Tailwind CSS saiba que a instalação via CDN tem as seguintes limitações:

  • Você não poderá personalizar o tema padrão do Tailwind
  • Você não poderá fazer uso de nenhuma das diretivas, tais como @apply, @variants, etc.
  • Você não poderá habilitar variants como o group-focus
  • Você não poderá instalar e utilizar plugins de terceiros
  • Você não poderá remover os estilos não usados (Purge) para diminuir o tamanho do arquivo de instalação do framework

No entanto, esta instalação, via CDN, é adequada para iniciarmos os estudos, pois neste primeiro momento ainda não examinaremos as funcionalidades listadas acima, pois elas exigem um conhecimento mais aprofundado do framework.

Um outro ponto é o tamanho do arquivo que pode ficar entre 73.2kB (comprimido) e 3020.7kB (sem compressão). Como citamos antes, usando a CDN, não será possível selecionar apenas os estilos que deseja e o arquivo conterá também estilos que não são usados ficando, portanto, com o maior tamanho.

Utility-first

No TailwindCss tudo gira em torno das utility classes que consistem em classes predefinidas que irão produzir os atributos css para os elementos em que forem aplicadas.

Vamos a um exemplo para entendermos melhor, no body de nosso exemplo digite o seguinte:

<div>
   <p>Tailwind Css - primeiro exemplo</p>
</div>

Salve o arquivo e carregue-o no browser para ver o resultado. Em seguida faça as seguintes alterações:

<div class="bg-gray-200 h-20 w-80">
    <p class="bg-gray-600 rounded-lg text-white py-2 px-4">Tailwind Css - primeiro exemplo</p>
</div>

Na figura abaixo vemos o resultado de nosso código: na metade a esquerda temos a tela do browser com o código original; e na metade direita depois de fazermos as alterações e recarregarmos a tela no navegador:

Tailwind CSS primeiro exemplo
Tailwind CSS primeiro exemplo




Examinando o código

Ao examinar o código acima vemos o que fazem as utility classes do Tailwind, para a div, após incluirmos os respectivos valores no atributo class foram aplicadas as seguintes classes:

  • bg-gray-200: que definiu a cor de fundo com um determinado tom de cinza. O esquema de cores deste framework é um tópico a parte que veremos em outra ocasião, mas em resumo, consiste no nome da cor seguido de um número e quanto menor o número mais suave a tonalidade;
  • h-20: define um height de 5rem, o Tailwind utiliza em seu sistema de medidas frações da unidade rem, assim o 20 será convertido para 5rem;
  • w-80: de forma semelhante ao item anterior, um width 80 será convertido para 20rem;

Prosseguindo, vamos ver mais algumas classe que foram aplicadas no elemento p de nossa página exemplo, são elas:

  • bg-gray-600: define a cor de fundo com um determinado tom de cinza, o número 600 especifica um dos tons de cinza predefinidos pelo esquema de cores do Tailwind e conforme citamos antes o número 600 corresponde a um tom mais escuro do que o número 200 que foi definido para a div;
  • rounded-lg: equivale a definir um border-radius de 0.5rem para o elemento;
  • text-white: muda a cor do texto para branco.
  • py-2: define o padding do elemento no eixo Y, ou seja, padding-top e padding-bottom, o valor é de 0.5rem;
  • px-4: de forma semelhante define o padding no eixo X, ou seja, padding-letf e padding-right, com o valor de 1rem

Estas são apenas algumas das utility classes definidas pelo Tailwind, existem inúmeras outras que abrangem além da formatação (layout, tipografia, espaçamento) também interatividade e transformações, como por exemplo rotacionar e redimensionar elementos.

Vale notar que uma utility class pode corresponder a várias propriedades CSS, por exemplo a classe px-4 produzirá o seguinte código css:

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

Trabalhe diretamente no HTML

Note que você não escreveu CSS, não definiu classes nem atributos personalizados, tarefas que seriam necessárias usando a abordagem tradicional sem a utilização deste framework.

Além disso, todas as alterações foram feitas em seu código HTML, e esta é a forma de trabalhar com o Tailwind CSS, sendo este um dos motivos de sua popularidade para o trabalho de prototipação de interfaces.

Para aplicar os estilos você irá alterar o código da página HTML e definir as classes correspondentes, de forma que usando este framework poucas vezes irá trabalhar com o CSS diretamente.

Instalação npx

Outra opção de instalação do Tailwind é o uso do npx (um utilitário que faz parte do pacote do npm) para gerar uma opção compilada local que poderá ser disponibilizada em uma pasta /css de seu website como as demais folhas de estilo.

Assim, assumindo que você já tem o npm instalado em seu ambiente de desenvolvimento digite o comando:

npx tailwindcss-cli@latest build -o tailwind.css

Este comando fará com que seja criado, na pasta onde foi executado, o arquivo tailwind.css contendo o framework.

Para referenciar este arquivo vamos alterar nosso código exemplo mudando a linha link, que foi incluída na instalação CDN, para que fique da forma abaixo:

<link rel="stylesheet" href="tailwind.css">

Recarregue a página no browser para ter certeza de que tudo ainda está funcionando, pois agora iremos apresentar, usando exemplos, outros princípios do Tailwind CSS.

Responsive Design

Um outro conceito chave presente neste framework é fazer uso de modificadores responsivos (chamados de breakpoints) nas utility classes para construir interfaces adaptáveis e responsivas.

No Tailwind CSS existem CINCO breakpoints predefinidos que servem para aplicar condicionalmente qualquer utility class do framework.

Esta funcionalidade facilita bastante a criação e interfaces responsivas de complexidade média sem a necessidade de alterar outro código além do seu HTML.

Os breakpoints foram definidos considerando-se as resoluções mais usuais encontradas nos dispositivos. São eles:

Breakpoint prefixMinimum widthCSS
sm640px@media (min-width: 640px) { … }
md768px@media (min-width: 768px) { … }
lg1024px@media (min-width: 1024px) { … }
xl1280px@media (min-width: 1280px) { … }
2xl1536px@media (min-width: 1536px) { … }

Para aplicar um breakpoint a uma utility class basta incluir o prefixo correspondente ao breakpoint antes da classe e separados pelo símbolo dois pontos “:”, vejamos abaixo um exemplo para ficar mais claro.




Exemplo com imagem

Em nosso arquivo de exemplo insira imediatamente antes da tag de fechamento </body> o código abaixo:

<img src="https://cdn.pixabay.com/photo/2018/07/09/17/44/baby-elephant-3526681_960_720.png" alt="Imagem exemplo responsivo"
        class="w-96 sm:w-80 md:w-72 lg:w-64"
>

Neste exemplo utilizamos os break points sm, md, e lg que correspondem, respectivamente, a 640px, 768px e 1024px, para alterar a width da imagem de forma responsiva, de forma a que ela se adapte ao tamanho da tela.

Assim, examinado o código vemos as seguintes classes:

  • w-96: define a largura padrão sem o uso dos modificadores e faz com que a largura (width) seja de 96, ou seja 24rem, para telas menores que 640px;
  • sm:w-80: usa o modificador sm para definir, de forma responsiva, que a largura será de 80, que corresponde a 20rem para telas a partir de 640px;
  • md:w-72: com o modificador md define a largura de 72 (18rem) para telas a partir de 768px;
  • lg:w-64: usando o break point lg define, para telas de 1024px ou superiores, a largura de 64 que é igual a 16rem.

Desta forma, a imagem ficará maior conforme diminua o tamanho da janela de exibição, de acordo com o exemplo ilustrado abaixo:

Tailwind CSS exemplo imagem responsiva
Tailwind CSS exemplo de imagem responsiva

Se achou que deveria ser ao contrário, ou seja, a imagem deveria ficar menor conforme diminuísse o tamanho da tela, um bom exercício seria você tentar alterar o código para que a página se comportasse desta maneira.

Incluindo CSS customizado

Usando a instalação npx também é possível que sejam definidas suas próprias classes CSS customizadas as quais serão incorporadas ao arquivo compilado final.

Para um exemplo deste uso vamos criar uma classe .btn contendo o código customizado para a definição das propriedades de, por exemplo, um elemento do tipo botão.

Primeiramente, na pasta raiz do projeto, crie um arquivo custom.css contendo o seguinte código:

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

As três primeiras linhas são obrigatórias e fazem com que sejam incluídos os elementos básicos do Tailwind CSS, as linhas seguintes contêm a definição e nossa classe customizada (btn).

Utilizamos a diretiva @apply para obter as propriedades predefinidas pelo framework e aplicá-las a classe customizada que estamos criando.

Assim, após o comando de build ter sido executado e aplicadas as propriedades das classes do Tailwind, a classe .btn terá as seguinte propriedades:

.btn {
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
    border-radius: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

Após criar o arquivo acima, execute o comando para obter o arquivo do Tailwind CSS compilado :

npx tailwindcss-cli@latest build custom.css -o tailwind.css

Observe que a única mudança em relação ao comando que usamos anteriormente é que agora especificamos que será usado no build o arquivo custom.css que contém nossas definições de classes customizadas.

Para finalizar inclua ao final de nossa página html exemplo o seguinte código:

<button class="btn">Botão</button>

Recarregue a página e deverá ver uma tela semelhante a ilustrada abaixo:

Tailwind CSS exemplo de classe customizada
Tailwind CSS exemplo de classe customizada

Conclusão

Neste tutorial de programação usando o Tailwind CSS vimos alguns dos recursos deste framework.

Além de alguns conceitos vimos também exemplos de como funcionam as utility classes, e os modificadores condicionais.

Apenas arranhamos a superfície deste framework, pois ele possui uma grande quantidade de recursos que não daria para esgotar em apenas um post.

Espero que tenha despertado sua curiosidade e te incentivado a dar uma chance ao Tailwind CSS. Bons estudo! Até a próxima!

Para saber mais

Link da documentação: https://tailwindcss.com/docs

Leia também

https://blog.parabah.com.br/tutorial-laravel-iniciando-com-front-end/