Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
5 minutos de leitura
Autor(a)
Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Alura. Nas horas vagas sou artista/ilustrador.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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?
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.
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.
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>
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 +
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.
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>
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!
Avalie este artigo
