Tailwind: Qual framework usar? Bootstrap vs Tailwind

Quando falamos de frameworks CSS um dos principais nomes que aparecem é Bootstrap. Mas recentemente um novo concorrente apareceu no mercado: o Tailwind. Os dois têm como princípio ajudar no desenvolvimento de páginas, mas ambos funcionam de maneiras bem diferentes. Então qual usar?

Bootstrap

Criado pela Twitter em 2011, o Bootstrap surgiu em um hackaton para padronizar o uso de ferramentas no desenvolvimento interno da empresa, evitando muitas manutenções e melhorando a consistência dos projetos. Bootstrap é um framework baseado em componentes. É pensado principalmente em desenvolvimento mobile-first. Sua prioridade é a responsividade.

Ele possui uma estilização pré definida, que chamamos de UI Kits, e qualquer customização precisa ser feita com a sobrescrita em um arquivo CSS próprio. Uma das grandes vantagens de usar Bootstrap é que componentes como menu laterais, cartões e carrousels já tem suas lógicas montadas, isso quer dizer que basta criar a sua estrutura e adicionar as classes corretas e sua funcionalidade é automaticamente implementada. Sem contar, novamente, tudo responsivo.

Tailwind: o que é?

Outro framework que vem ganhando notoriedade no mercado é o Tailwind. Criado em 2017 é um framework baseado em utilidades e tem como prioridade a facilidade de customização.

Estilizar elementos com Tailwind é quase como escrever estilizações inline (escrever CSS dentro do atributo style), só que com classes. Por isso ele é um framework focado em utilidades. Classes como text-blue-600 para mudar a cor do texto de um elemento são muito utilizadas. A grande vantagem é que não precisamos seguir um padrão visual pré definido pelo framework.

As vantagens de trabalhar com Bootstrap

Se você é uma pessoa nova no mundo do front end e ainda não conhece muito a fundo as propriedades CSS e como elas funcionam, o Bootstrap é um ótimo ponto de início. Sua escrita é relativamente simples e sua documentação é bem completa.

Um exemplo de criação de um cartão com Bootstrap:

<div class="card">
  <img loading="lazy" src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título do Cartão</h5>
    <p class="card-text">Um texto qualquer escrito dentro do cartão, servindo como uma legenda ou até mesmo um complemento de informações.</p>
    <a href="#" class="btn btn-primary">Ir até -></a>
  </div>
</div>

Um cartão com bordas arredondadas dividido em duas partes. A parte de cima está com uma imagem cinza como placeholder e a parte de baixo contém um texto qualquer com um botão no final

O Bootstrap segue o padrão BEM de escrita de CSS, então se você já tem o costume de trabalhar com esse padrão, vai se sentir bem (heheh) em casa com a forma de escrita do Bootstrap.

Para saber mais sobre o BEM confira este artigo/alura +
BEM

Outra vantagem que já foi escrita aqui antes é que as funcionalidades dos componentes já são montadas automaticamente com jQuery e um JavaScript próprio. Outra vantagem é que grande parte das estilizações já vem prontas. Portanto cores, tipografias, tamanhos, grids, etc... já são pré definidos. Para pequenas customizações, o Bootstrap também possui classes utilitárias. Então, caso queira aumentar o tamanho de alguma margem, pode utilizar a classe m-3. Lembrando que os valores, descrições e exemplos estão dentro da documentação.

Documentação do Bootstrap

As vantagens de trabalhar com Tailwind

Se você já tem mais afinidade com propriedades CSS, Tailwind permite um maior controle na estilização da página. Tailwind também consegue trabalhar com diversos plugins e ferramentas para facilitar o desenvolvimento, além de poder usar componentes criados por outras pessoas. Um ótimo exemplo de plugin é o PurgeCSS que permite remover qualquer CSS não utilizado no projeto, diminuindo o tamanho dos arquivos de estilos.

Como Tailwind é um framework que usa classes de utilidades, os elementos podem ficar lotados de classes, sem contar a repetição e a manutenção para vários componentes ao mesmo tempo. Por isso, o Tailwind permite que você crie classes customizadas que recebem as classes de utilidade, e depois basta chamar as classes criadas que os componentes vão receber todas as propriedades selecionadas.

.botao {
  @apply text-base font-medium rounded-lg p-3;
}

.botao--primario {
  @apply bg-rose-500 text-white;
}

  <button class="botao botao--primario">Aceitar</button>

Imagem de um botão rosa com bordas arredondadas e a palavra "Aceitar" escrito em branco dentro

Conclusão: Qual é a escolha?

No geral depende do caso de uso, assim como qualquer outra ferramenta ou framework. Para quem está começando Bootstrap é mais simples de escrever (por conta do uso do padrão BEM) e criar layouts, mas com o custo de ter que usar o UI kit padrão (tornando seus projetos mais genéricos em linguagem visual) e ter que usar várias ferramentas extras para o funcionamento de alguns componentes, como JQuery, tornando a solução mais "lotada" e mais pesada.

Tailwind permite maior controle na linguagem visual e é a solução mais leve por usar apenas as classes necessárias para desenvolver a página. Caso precise de outras ferramentas e plugins, você pode instalar por opção e não obrigação. Por outro lado, ele requer um conhecimento maior das propriedades CSS e seus nomes de classes exigem uma curva de aprendizado maior comparado com Bootstrap.

Gostou do conteúdo e quer aprender mais sobre CSS? Então conheça a Formação HTML e CSS da Alura e mergulhe nos mares do front-end!