Oi, vamos falar sobre Tailwind.css?
Como um desenvolvedor front-end apaixonado por estilos e pela criação de experiências visuais incríveis para os usuários, gostaria de compartilhar minha experiência com o famoso do momento Tailwind
Recentemente, senti a motivação para criar meu portifólio, com 4 de experiencia no mercado, reconheci a importância de ter meu próprio portfólio. Foi aí que minha jornada com o Tailwind começou.
Em meio as ideias para as sessões do site, paleta de cores e tecnologias, lembrei-me da existência do Tailwind e pensei:
Por que não aproveitar essa motivação e incluir um novo framework no meu arsenal?
A ideia foi ótima! Conclui meu portifólio em apenas duas semanas no máximo, (eu sei que ele é minimalista, mas leva em consideração toda a componentização dele, a documentação dos componentes e por ai vai...), e estou certo de que isso não seria possível sem o Tailwind. Já tentei criar meu portfólio de maneira mais convencional usando:
- CSS
- SASS
- Styled-Components (oque seria
e foium tiro no pé... Mas isso é assunto para outro momento).
No entanto, tenho algumas ressalvas sobre o uso do Tailwind, algo que me deixou um pouco inconformado durante a utilização. Vamos abordar esses pontos em tópicos, certo?
Abstração do CSS
A abstração do CSS me deixou muito feliz ao utilizar o Tailwind. Como mencionei antes, adoro estilos de site/apps, mas isso tem um custo! Escrever um arquivo de estilização com mais de 1.000 linhas pode ser desafiador, mas a recompensa é valiosa. Isso força os desenvolvedores novatos a aprenderem CSS, entenderem como cada propriedade funciona, a ordem de estilização e os padrões de Cascading Style Sheets.
Dores como essas levam a soluções mentais. No meu caso, o Tailwind se encaixou perfeitamente, pois minha experiência em escrever CSS puro me permitiu saber exatamente o que fazer e onde escrever para obter o resultado desejado.
Código 'sujo'?
A clássica reação de quem vê o Tailwind pela primeira vez:
Nossa, mas a classe da tag vai ficar desse tamanho mesmo?
Até a escrita deste artigo, não encontrei nenhuma biblioteca que melhore essa visualização. Aqui, quero destacar um ponto interessante.
Desenvolvendo meu site, me deparei com situações em que meu arquivo React tinha linhas de classes enormes. No entanto, isso me fez repensar a abordagem e considerar mais o uso de componentes. Explicarei
Em minha opinião, não vejo problema em um componente ter uma classe grande ocasionalmente, desde que essa parte do código não se repita com frequência. Se começar a se repetir, acho que vale a pena revisar e transformar esse trecho em um componente. O Tailwind te desafia nesse aspecto, incentivando a prática de um código mais modular e a se tornar um programador melhor. Vai por mim!
Padrões de configuração
Além de poder sobrescrever as configurações padrão do Tailwind, você pode estendê-las para suas configurações (exemplo na imagem). Isso é simples de fazer, usar e deixa o código muito mais organizado. É simplesmente incrível, não há o que declarar sobre isso, 10 a 0 em qualquer modularização que já utilizei
Recomendo?
Em minha opinião, depende! Que ironia
Brincadeiras a parte, o Tailwind é ótimo para criar projetos curtos, de tiro rápido, como:
- Portfólio
- Um site para divulgar algum serviço
- Marketplace de algo especifico
Ele proporciona velocidade e escala bem para o tamanho desses projetos, permitindo entregas mais rápidas. Dificilmente você não concluirá esse projeto antes de se cansar dele.
PS: Lembre-se, ao recomendar esse framework para alguém que nunca viu programação na vida, ele pode pular uma etapa crucial no aprendizado.
Agora, em projetos grandes ou diferentes dos mencionados anteriormente, acredito que existem opções melhores no mercado. A manutenção futura será mais compreensível para a maioria do mercado atual, e a escalabilidade será infinitamente melhor, na minha opinião, pois já temos ferramentas para nossas dores mais comuns, enquanto o Tailwind ainda não as possui. Acredito ser apenas uma questão de tempo!
Compartilhe sua opinião sobre o Tailwind.css nos comentários e vamos ter uma conversa saudável!
Top comments (2)
Muito bom, Lobster! Curto usar o Tailwind para projetos rápidos, como você mencionou.
Uma coisa que pode ajudar um pouco, além da componentização, é utilizar o @apply. Vai um pouco de encontro com a ideia de deixar todas as classes explícitas, mas pode ser útil para quando elas se repetem muito.
Perfeito, usei ele, e faltou a inclusão no artigo!