Tailwind CSS: por que utilizá-lo em projetos front-end?

Se você é desenvolvedor front-end, já deve ter se deparado com esse dilema: devo ou não utilizar um framework CSS? 

Utilizar frameworks CSS é bastante comum na rotina de desenvolvedores web. Os frameworks ajudam a otimizar o tempo de desenvolvimento e escrever menos código, pois escrever seus arquivos CSS manualmente requer um altíssimo grau de customização e, proporcionalmente, uma grande quantidade de trabalho aplicada.

Visando produtividade e flexibilidade, hoje vamos entender mais sobre o Tailwind, um framework CSS com a premissa de utility first.

O que é utility first?

‍

O utility first, que significa utilidade em primeiro lugar, é uma abordagem de CSS escrita que usa as chamadas classes utilitárias ou funcionais. Elas representam atributos do CSS diversos como width, font-size, etc. 

Existem diferentes nomes para a abordagem ou padrão chamado de utility-first, entre os nomes sinônimos temos: Immutable CSS, Functional CSS e Atomic CSS.

Para explicar o conceito de utility first, vamos criar um simples botão com CSS puro e Tailwind.

CSS Puro

‍

Para utilizarmos o CSS puro, primeiro precisamos definir a classe, para depois aplicá-la em nossa tag no HTML. Vamos chamá-la de .primary-button.

Essa é a nossa classe com CSS puro. Agora vamos aplicá-la ao nosso HTML.

Tailwind CSS

Para recriar o mesmo botão, agora com o Tailwind, precisamos adicionar uma série de classes utilitárias (utilities), como se fossem blocos de montar, para chegar ao estilo que queremos. Veja no exemplo abaixo:

Os nomes das classes do Tailwind por si só já são bem intuitivas. Vejamos o que cada uma das classes significa:

• bg-blue-500: adiciona a cor #4299e1 como cor de fundo do botão;
• rounded: define border-radius de 0.25 rem;
• px-4: adiciona 1 rem de padding tanto na parte esquerda quanto na parte direita do botão (eixo x);
• py-2: adiciona 0.25 rem de padding tanto na parte superior quanto na parte inferior do botão (eixo y);
• font-sans: define a família da fonte para o tipo sans-serif;
• text-white: define a cor do texto para a cor branca;
• hover:bg-blue-600: define a cor de fundo #3182ce quando o mouse está sobre o elemento.

Paletas de Cores

‍

Uma das características mais bacanas do Tailwind é a composição da paleta de cores. O Tailwind conta com 10 diferentes paletas de cores, cada uma com 9 tons diferentes de uma mesma cor. É daí que o 500 e 600, que utilizamos nos botões acima, vieram. 

Aqui estão algumas paletas, por exemplo:

Utilizar apenas as cores que o Tailwind disponibiliza, não limita o desenvolvedor. No arquivo de configuração, o tailwindconfig.js, podemos adicionar novas cores e nomeá-las como quisermos, e assim, utilizar como uma classe utilitária.

Quais são as vantagens de utilizar o Tailwind CSS?

‍

1. Nunca mais perca tempo pensando em nomes para suas classes no CSS

Como dito anteriormente, utilizar o CSS puro requer um altíssimo grau de customização e, consequentemente, tempo de trabalho. 

Um dos fatores que tira muito tempo do desenvolvedor são os nomes que as classes devem receber. Isso acontece devido às classes que precisam ter nomes caso algum outro desenvolvedor que venha a mexer no código, consiga entender para quê essa classe serve e qual seu contexto dentro do código.

Graças ao conceito de utility first, o desenvolvedor não precisará sequer escrever o CSS, isso por que o Tailwind possui um conjunto enorme de classes utilitárias que adicionam cores, preenchimento, padding, margin, dentre outras propriedades que o CSS oferece de forma rápida e legível. 

‍

2. Documentação e Comunidade 

A Documentação do Tailwind é extremamente completa e rica em detalhes. Além disso, todas as propriedades do Tailwind são seguidas de vários exemplos de uso. Outro ponto forte é a comunidade de desenvolvedores que contribuem no ecossistema do Tailwind, mantendo o framework continuamente atualizado. 

As contas oficiais do Tailwind no Twitter e do criador e desenvolvedor principal (@tailwindcss e @adamwathan) estão em constante contato com os desenvolvedores que utilizam o framework para saber a experiência de usar o Tailwind e o que pode ser melhorado.

‍

3. Renderização do layout de forma mais rápida 

O Tailwind contém um pacote gigante de classes utilitárias, o que pode resultar em lentidão na hora em que o navegador renderizar suas aplicações. Para mitigar esse problema, o Tailwind utiliza uma tecnologia chamada PurgeCSS para verificar seus arquivos e detectar as classes que o desenvolvedor está utilizando. 

O resultado da varredura? No seu arquivo CSS final conterá apenas as classes que de fato você aplicou em seu código.

Alguns benefícios que podemos listar são:

• Tamanhos de arquivos CSS menores resultarão em uma renderização mais rápida para sua aplicação.

• Com a aplicação renderizando de forma mais rápida, consequentemente a entrega resultará em uma melhor experiência para o usuário, além de melhorar o ranking no SEO (otimização de mecanismos de busca).

E quais são as desvantagens?

‍

1. Documentação apenas em inglês

A falta de tradução para outros idiomas, como, por exemplo, espanhol e português,  pode ser um problema para desenvolvedores que não estão familiarizados com o inglês.

2. Necessidade do Node.js para ter uma boa funcionalidade

O Tailwind precisa ser instalado via gerenciador de pacotes (npm ou yarn), ou seja, não conseguimos utilizar de forma fácil em projetos simples sem frameworks que utilizam apenas HTML, CSS e Javascript.

De forma geral, as desvantagens de utilizar o Tailwind são poucas em comparação à vasta quantidade de vantagens e benefícios que a ferramenta oferece ao desenvolvedor.

Aqui na Vsoft, utilizamos o Tailwind como framework CSS no desenvolvimento front-end, nos beneficiando da agilidade que a ferramenta proporciona e entregando uma melhor experiência ao usuário final, com interfaces incríveis e com rápida renderização.

Se você ficou interessado em ser parte da nossa equipe, a Vsoft está em constante crescimento. Acompanhe nossas vagas aqui.