DEV Community

Cover image for Você deve usar tailwindcss!
Raphael Ramos
Raphael Ramos

Posted on • Updated on • Originally published at raphaelramos.dev

Você deve usar tailwindcss!

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 classe pb-10 e definir a classe apenas para um tamanho de tela também é simples com um prefixo. Para dispositivos de tamanho médio seria md: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

https://2022.stateofcss.com/en-US/css-frameworks/

Top comments (0)