Você deve usar tailwindcss!
Raphael Ramos
Posted on May 16, 2023
Claro, o uso é relativo, já que uma ferramenta que se encaixe em um projeto não significa ser a ideal em todos os outros. Mas agora que consegui sua atenção com o título, veja alguns motivos para considerar usar o tailwind no seu projeto.
Podemos dividir frameworks CSS nas categorias Components e Utility como veremos a seguir.
Diferente de outros populares frameworks de CSS, como o bootstrap, que traz o design pronto com estilização (components), o tailwind traz classes para você criar seu próprio design (utility).
Seu código vai ficar cheio de classes e parecer feio, o que mais incomoda alguns devs, porém isso vem com ganhos de velocidade no desenvolvimento após o domínio da ferramenta.
Lembre-se da letra S (Single Responsability Principle) do SOLID para que seu código não fique sujo. Então não crie componentes complexos e grandes, do contrário, use outra solução de CSS para seu HTML não ficar enorme.
Pontos que me fizeram optar pelo tailwind em meus projetos:
- Maior controle na linguagem visual, mais leve por usar apenas as classes necessárias e vai melhorar seu conhecimento de estilos CSS em comparação a um framework de componentes.
- Curva de aprendizagem não muito alta. As classes utilitárias de tamanho são abreviações de estilos CSS. Por exemplo,
padding-bottom: 10px
é a classepb-10
e definir a classe apenas para um tamanho de tela também é simples com um prefixo. Para dispositivos de tamanho médio seriamd:pb-10
; - Tudo pode ser personalizado. Use o arquivo tailwind.config.js para criar seu próprio Design System. Você pode levar seus tokens de UI para lá;
- Traz padronização desde o início do seu projeto, como múltiplos de 8 e unidade rem;
- Adotado por grandes empresas;
- Exibido na documentação do Next.js;
Dica: Extensão Tailwind CSS IntelliSense para VS Code.
Crie um tema no arquivo de configurações para definir as cores, fontes e espaços, os design tokens. Se houver uma modificação, você não vai precisar trocar todas as classes do código.
Além do já citado bootstrap, temos outras atraentes, como o styled components, Chakra UI e Material Design.
É necessário analisar qual se enquadra melhor no seu projeto. Eu defendo mais CSS puro ou tailwind pelos motivos já listados.
Esse artigo é sobre frameworks e não Tailwind vs CSS. Há quem prefira o CSS puro e ter menos classes no HTML, o que também é válido.
Único caso que não recomendaria qualquer tipo de framework é na criação de libs. Aliás, quando menos dependências em libs melhor.
Se você é iniciante recomendo estudar bootstrap, que possui curva de aprendizagem baixa e é usada também no mercado e depois partir para estudar uma solução de utilitários como o tailwind e aprender CSS. Todos Devs front-end tem que saber no mínimo o básico de CSS!
Bootstrap venceria em um cenário
em que você precise desenvolver um produto rápido e já estilizado, já o tailwind onde você já tem um Design System próprio.
Confira o ranking dos frameworks CSS em 2022
Posted on May 16, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.