TailwindCSS! Por que eu mudei de ideia, saindo de odiar, para amar?
Tailwindcss é um framework CSS focado em utilidade e rápido desenvolvimento, como dito no próprio site (em tradução livre) "Construindo websites modernos sem precisar nunca sair do seu HTML.". Tailwindcss funciona com base em classes, ele abstrai as propriedades do CSS em classes intuitivas e fáceis de usar, para que os estilos possam ser implementados no próprio HTML, sem a necessidade de escrever arquivos dedicados de CSS.
Para quem já trabalhou com bootstrap, isso pode parecer familiar, mas diferentemente do Boostrap, Tailwindcsss trás classes simples representando uma única propriedade do CSS ou algum comportamento especifico de um conjunto de propriedades, tornando-o mais versátil e escalável que o conceito do Bootstrap, permitindo que os desenvolvedores construam o que quer que desejem sem depender de limitações de framework.
Alguns exemplos de classes tailwindcss:
- p-4: representando padding: 16px (ele funciona numa base 4, onde devemos multiplicar os números do tailwind por 4 para obter o valor em pixels, mas esse é um assunto pra outro post);
- bg-white: representando background-color: white;
- animate-spin: representando o comportamento de uma animação em rotação..
Minha história com tailwindcss
Meu primeiro contato com o framework foi em Maio de 2022, em um evento gratuito e online chamado NLW (Next Level Week) produzido pela Rocketseat. No evento desenvolvemos um widget para envio de feedbacks, que podia ser adicionado a qualquer projeto. Na época eu gostei da proposta promissora do framework CSS, mas quando tentei implementar em um projeto próprio, comecei a não gostar da biblioteca, por causa da verbosidade que ela acrescentava ao código.
No primeiro momento eu disse: "NÃO!"
Na época, eu estava estilizando todos os meus projetos com styled-components, que eu gosto demais (mas esse é outro assunto para outro post), então eu pensei: "por que o tailwindcss se o styled-components é tão melhor pra mim?" (quase um pensamento de fã, não acham? 😅).
A figura abaixo mostra o retorno do componente PostCard deste blog e podemos ver que a tag "motion.li", uma tag que precisa de um pouco mais de estilização, se torna muito grande, graças a quantidade de classes necessárias para estilizá-la. Essa era uma coisa que eu não gostava nem um pouco sobre o tailwindcss.
ENTÃO EU DISSE: "SIM!"
Eu fiquei alguns meses sem implementar o tailwindcss depois da primeira tentativa e então decidi tentar novamente, vendo o crescimento no número de gente adotando o framework como opção número um.
Com isso, mais e mais eu comecei a entender a proposta da biblioteca e comecei a gostar dela. Algumas das vantagens do tailwindcss que me fizeram mudar de ideia, são:
- Classes intuitivas e fáceis de memorizar;
- Extensões muito boas para o VSCode, o editor que uso (e adoro), que ajudam muito com as classes;
- Desenvolvimento acelerado, devido a não necessidade de arquivos dedicados apenas a estilização (e sim, isso faz uma diferença enorme em eficiência de escrita de código);
- A possibilidade de componentizar a interface usando React e criar arquivos menores com menor números de linha de código.
Esse último ponto foi extremamente imporante pra mim e, se você desenvolve com tailwindcss e React e acredita que os seus componentes estão difíceis de ler, você deveria considerar que possivelmente o responsável pela má legibilidade do seu código pode não ser o framework, provavelmente a culpada é a implementação dos componentes.
React possibilita fortemente que a partir de um componente, o separemos em componentes menores e quando eu entendi que meus componentes estavam ficando difíceis de ler porque seus returnos JSX estavam com muitas linhas de código, não por causa da quantidade de classes do tailwind, isso me habilitou a usar a biblioteca com o melhor que ela tem a oferecer sem sofrer com a sua principal desvantagem. Além disso, eu comecei a desenvolver componentes React cada vez melhores e mais legíveis, seja para aplicações com tailwindcss ou não.
Exemplo de Refatoração
Mesmo o componentes de PostCard mostrado na primeira figura sendo bastante legível e não sendo necessária sua refatoração, vamos ver como poderíamos deixá-lo ainda mais legível, separando-o em componentes menores.
E aqui estão os componentes menores, criados a parte do componente principal PostCard, respectivamente AnimatedWrapper, PostCardBanner e PostCardTags
Tailwindcss é pra você, que está lendo este post?
Eu acredito que essa seria um afirmação muito forte e provavelmente errada. Eu acredito que não existe ferramenta perfeita no geral. Existem sim ferramentas perfeitas para situações especificas.
Se você trabalha em um projeto React extremamente organizado, cuja implementação segue boas práticas e que tem uma boa arquitetura de componentes, tailwindcss pode ser uma boa escolha pelo ganho de produtividade. Se o seu projeto está indo numa velocidade super rápira e você (ou o seu time) acredita que criar uma boa estrutura de arquitetura para os componentes é uma perda de tempo*, provalvemente o tailwindcss vai atrapalhar mais na legibilidade do seu código, do que vai ajudar.
* acredite em mim, uma boa arquitetura e boas práticas de código nunca são uma perda de tempo. Seu você do futuro vai te agradecer por essa "perda de tempo".
No entento, eu acredito que todo dev frontend deveria tentar tailwind, pelo menos uma vez.
- Se você desenvolve no frontend e nunca tentou ou ouviu falar sobre o tailwincss, confira este link para a documentação oficial e dê uma chance.
- Se você já tentou uma vez e não gostou, talvez deva considerar dar uma segunda chance para o framework.
- Se você usa e gosta do tailwindcss, bate aqui 🖐.
Para vocês que chegarm até o final do post, me contem nos comentários o que vocês acharam do conteúdo.
Nessa publicação eu mencionei o styled-components, que é uma outra biblioteca de estilização de aplicações web, vocês gostariam de um post fazendo uma comparação entre as duas bibliotecas?
E que tal um post mais técnico, fazendo uma introdução ao tailwindcsss, passando pela instalação, configuração e criação de alguns componentes?
Me falem nos comentários abaixo e até a próxima!