Você deve usar tailwindcss!

raphaelramos

Raphael Ramos

Posted on May 16, 2023

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/

💖 💪 🙅 🚩
raphaelramos
Raphael Ramos

Posted on May 16, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Você deve usar tailwindcss!
braziliandevs Você deve usar tailwindcss!

May 16, 2023